When I look at my blog pages with a right sidebar, on a desktop, it looks exactly the way you would expect, and the same goes for a tablet. The problem is when I look at those same pages with a smartphone. When I look at the pages on my smartphone, the left, main content column is there and you can see a blank space where the sidebar would be, but the sidebar content isn’t there. It’s being pushed to the very bottom of the page, below the main content.
Here’s a link http://findhealthcaretraining.com/blog/. (Not sure if the message board will let me share the link.) You should be able to either look at it on a smartphone, or just make your browser window very small.
I’ve even tried doing something as drastic as this just to test
@media(max-width: 800px) {
body.has-sidebar #secondary {
width: 86%;
}
body.has-sidebar #primary {
width: 10%;
}
}
to make the sidebar very wide and the main content very small, but it doesn’t work. The 2 regions of the page do change to the sizes I’ve specified in the CSS code, but the sidebar content is still pushed to the bottom of the page.
Any information, or suggestions would be greatly appreciated.
Thanks.
I have a follow-up question. If you look at page one of my blog pages and them page two, you’ll notice that starting on page two, the blog post summaries are moved further to the right. Is this something that’s happening because of the theme code, or could this be because all my blog posts were imported, using a WordPress export .xml file?
Thanks.
Hi Robert,
On mobile devices, we remove the float (which allows for things to appear sidebar side) from the content and sidebar area. You can prevent this by adding the following CSS to WP AdminAppearanceCustom CSS:
@media (max-width: 680px) { body.responsive #primary { float: left; } body.responsive #secondary { float: right; } }Please note that your drastic test CSS won’t work as the width exceeds 100% (which means the sidebar would have appeared below anyway).
You might also need to install the SiteOrigin CSS Editor.
Regarding the second issue. That looks like it’s being caused by an invalid featured image (which appears as a blank image when editing the post) being selected. I would double check your post settings to ensure this isn’t the case.
Alex,
Thank you for your reply. Unfortunately, the code you provided didn’t seem to work, but maybe it’s because of the width of the ads I’m trying to place in the sidebar. I need to make sure the sidebar is a certain width to accommodate the ads. Can I combine your code with something like this to make the sidebar a certain size
@media (max-width: 680px) { body.responsive #primary { float: left; } body.responsive #secondary { float: right; } body.has-sidebar #secondary { width: 50%; } body.has-sidebar #primary { width: 46%; } }Also, you mentioned the drastic example from my original message was over 100%, but I was using 86% and 10%, which would leave a buffer of 4%. I found the code for changing the sidebar size on this message board, a few months ago and the poster said to leave a 4% buffer for padding.
I may just give up on trying to get the main content area and sidebar to work properly on smartphones, because I probably don’t have a lot of people viewing my content using a smartphone. I’ll need to check my analytics.
Thanks.