Twenty Twelve - fixed width content breaks responsive layout for mobile

[chriswallace]

In cases where a fixed width element is located inside a page or post, the element breaks the layout, causing scrollbars on mobile.

I recommend adding overflow: hidden; to the #content div for smaller screen sizes, to avoid the possibility of left/right scrolling.

Thanks for the report, Chris. Could you add screenshots for this, please? That way we can test the same cases and scenarios you are looking at to see the same thing breaking.

Also maybe post up a way to repeat it by entering something into the page or post content.

I saw this behavior using the Theme Unit Test data. It can be replicated by importing the unit test data and resizing the window to approximately 320px wide.

This is on the latest version of Chrome.

Smaller viewport with fixed width content inside post.

Is this in a specific post? I can't reproduce it on index pages: ​http://responsinator.com/?url=themebuster.wordpress.net

I missed your last comment. :) Patch coming up.

Fix attached.

In [21407]:

Twenty Twelve: add max-width rule to help captions not overflow their container at small window sizes. Props chriswallace and obenland, fixes #21383.