Your site is including this stylesheet, which is hiding h1 tags on several pages. Your responsive menu button is an h1 tag so it’s also being hidden. My guess is that a plugin or your theme has a setting to hide page/post titles. http://test.neverabystander.com/?custom-css=1&csblog=1&cscache=6&csrev=79
The slider and much of the page content was being cause by a negative margin applied to the body of your page. It was -11%, but it looks like it’s gone now. Perhaps you’re working on the site right now.
In regard to making the rest of your page responsive: there are many techniques and a lot to learn about responsive design. I’ll give you my basic strategy, though.
Starting with an already built website like yours I would use media queries to redesign the site for general devices, tablet, mobile, etc.
An example of a media query I often use for mobile:
@media only screen and (max-device-width : 480px) {
}
Within the opening and closing curly brackets you can add any css rules and they will only be applied when the screen width is 480px or less. At this point I usually abandon fixed pixel size design is favor of a fluid single column layout. I try to keep it simple for mobile.
This is very general information, but I hope it gets you started. This site has a list of media queries for common devices. http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Good luck!
Hi Chris,
Thanks so much for identifying that my responsive menu button is an h1 tag!
1. I hid the h1 tags this way after trying many, many other options for hiding them, because they just look silly given the layout of my site (which my client is attached to). The h1 tags look especially weird on the home page; they put a whomping big “home” title right between the slider and the 3-column table format below it, very distracting.
2. Isn’t there some way to just make the responsive menu button, say, an h2 tag, so all that existing design will just pop back into place? I tried to figure it out, but I couldn’t locate the css that defines the responsive menu button.
3. The link and general info you shared about media queries is very nice, but I don’t know enough css to add to those queries to straighten out table and images below the video slider and make the navigation bar reappear.
That’s why I’m wondering if I can just change the tag associated with the responsive menu button; I think everything would be taken care of if I could just reactivate that code. Any suggetsions? Thank you again! It is so frustrating and time consuming figuring out these tweaks without much css knowledge!
ps. I looked at plug-ins and it seems like, though there are many, they are somewhat theme specific, and also fairly buggy, which is another reason I’m somewhat fixated on figuring out how to reactivate the Sundance theme built-in responsive layout. I could try some of those as a last resort if there’s no other way though 🙂
You can take advantage of CSS specificity to hide your <h1> tags but leave the menu toggle intact:
.page-id-4 h1.menu-toggle { display: block; }
Repeat that code for every page where you’ve hidden the <h1> tags.
But it won’t fix your responsive problems because your table is breaking out of its container and pushing out beyond the edge of the window. I can’t replicate the problem on my local WP install; how did you add the table to the page?
Ha! Thank you so much, stephencottontail! Navigation menu toggles are done and the menu looks great on big and little screens now!
Yes, that table, grrr. I used html code as follows:
<table style="width: 100%; border-spacing: 10px;">
<tbody><tr><td></td></tr>
Headers, images, and text are inside those tags, 3x for three rows.
Another oddity with the table is that the spacing was never even in the text columns, no matter what I did. I tried downloading a couple of table plug-ins, but they didn’t like images. I eventually tried this solution, which works, although strangely, the code periodically disappears from the text editing page. I guess WordPress doesn’t like it. But at least for my regular screens, it does the trick. This is what I used to address that:
<col span="3" "width: 33.33%;">
</span>
But like I said, WP periodically kicks it off the page. It’s missing right now, though the columns stayed okay. I’m grateful for whatever suggestions you have…this is very encouraging.
I looked at that table for almost half an hour this morning (when I made my first post) and I could not figure out what the issue was. I even went so far as to copy the entire HTML structure of the table into my own local WP install and it looks perfectly fine.
I think you’re going to need to ditch the table layout to make your homepage responsive. Luckily there’s a great solution.
https://ww.wp.xz.cn/plugins/column-shortcodes/
This plugin adds a button to the page editor, just to the right of the “Add Media” button that adds column shortcodes to your page. The best part is it’s responsive so the columns will stack on smaller screens instead of running off the page.
After installing the plugin, you’ll basically just wrap you content in shortcodes like this:
[one_third]Column 1[/one_third]
[one_third]Column 2[/one_third]
[one_third_last]Column 3[/one_third_last]
I tried it out just now with the 2014 theme and it works great!
Thanks Stephen and Chris…
@stephen I wonder if there is something about my theme code, which places the video slider at the top of the page, that is throwing off the table on smaller screens. That’s the only thing I can figure out. Of course, the video is essential to my site, since it’s about a film!
@chris, I will try this plug-in. Unfortunately I have tables on many pages 🙁
@ chris…progress! I used the plugin to rebuild the home page, and it looks great on my phone, but on my laptop, the third column is out of alignment with the first two. I did use the special code for the last column as in:
[one_third_last]Column 3[/one_third_last]
I also tried removing all the padding, and removing the ‘last’ part of the tag, but the result was the same.
It’s close! And of course it actually didn’t take very long to rebuild…do you have suggestions for fixing the last column? Thanks again for this!
There’s a break tag just before the last column which is why it isn’t aligned the same as the other two. You may or may not be able to see the break tag when you’re editing the page. Try making sure there’s no extra lines between the end of the second column and beginning of the third.
[/one_third]
[one_third_last]
If you still get that odd spacing, put them on the same line.
[/one_third][one_third_last]
Oh sheesh! I thought I checked for that! Thank you so much!
Now to fix those other pages with columns…
