[Theme TwentyTwelve]Sidebar appearing below page content on iPad/Tablet

That’s by design, and not specific to this theme.

It’s how RWD ( Responsive Web Design ) does it.

Content should be readable in small screen right away without zooming in, so in small screen all the contents get 100% width, main content stays on top and secondary ones go below.

Yes, I understand and I do see the necessity for this on mobile phones. But is there a way to disable the RWD for my sidebar? Because if you look at the pictures, there is obviously enough space left to have a sidebar menu…

Does the same thing happen on the official theme’s demo site ?

Hey Paul,

Thanks for your reply. I checked the theme’s demo site and noticed that it did the same thing, yet only at much smaller browser size dimensions.

I think I fixed it by decreasing the width of the main content area and sidebar area and now it seems to fit and work better in an ipad environment.

Hope I fixed it the right way….

Ah….just noticed what caused the problem initially.

I used the code

/*-- move sidebar to the left --*/
@media screen and (min-width: 200px) {
    .site-content {
        float: right;
		width: 650px;
    }
    .widget-area {
        float: left;
		width: 150px;
    }
}
/* for IE8 and IE7 ----------------*/
.ie .site-content {
    float: right;
}
.ie .widget-area {
    float: left;

to move my sidebar from the right to the left and this broke the responsive design of my website…

Would you happen to know the right technique to move the sidebar from right to left?

To swap the content and sidebar, use this below

@media screen and (min-width: 600px) {
	.site-content { float: right; }
	.widget-area { float: left; }
}

It’s the only reference to float of these 2 contents in the original stylesheet, so we only override this part.

It should go without saying that the overriding CSS must come after, so that code is used in child theme’s style.css or in Custom CSS plugin only.

Regarding the width.

Default for .site-content is 65.1042% = 625px
Default for .widget-area is 26.0417% = 250px

The total width is 960px

So you can, if you want, make sidebar bigger. Just add the width to .widget-area ( in the code wrapped in media query above ) and you have to use % only.

Seriously amazin Paul. You really helped me so much.
Thanks man, and have a good weekend :).

You have a good weekend too ??

Here’s a question to continue this topic… I have the same problem in a child theme of Twenty Twelve, but I made the navigation a vertical column and put it on the left of the content. I changed the left margin of the content to move it over to the middle of the page and am using percentages on navigation, content, and sidebar widths.

It looks correct on my laptop, but on my mobile device, the sidebar appears below the content. What would I need to do to make this work for mobile devices since my menu is on the left?

Hi David, please open a new ticket for this as it’s best to keep one topic per issue. Also, post the link to live site so that someone can help debug.

Will do, Paul.