Make WordPress Core

Opened 12 years ago

Closed 12 years ago

#21383 closed defect (bug) (fixed)

Twenty Twelve - fixed width content breaks responsive layout for mobile

Reported by: chriswallace's profile chriswallace Owned by: lancewillett's profile lancewillett
Milestone: 3.5 Priority: normal
Severity: normal Version:
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

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.

Attachments (2)

mobile.png (212.5 KB) - added by chriswallace 12 years ago.
Smaller viewport with fixed width content inside post.
21383.diff (389 bytes) - added by obenland 12 years ago.

Download all attachments as: .zip

Change History (12)

#1 @chriswallace
12 years ago

  • Component changed from Themes to Bundled Theme

#2 @SergeyBiryukov
12 years ago

  • Milestone changed from Awaiting Review to 3.5

#3 @lancewillett
12 years ago

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.

#4 @obenland
12 years ago

  • Cc konstantin@… added

#5 @drewstrojny
12 years ago

  • Cc dstrojny@… added

#6 @chriswallace
12 years ago

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.

@chriswallace
12 years ago

Smaller viewport with fixed width content inside post.

#7 @obenland
12 years ago

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

#8 @obenland
12 years ago

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

@obenland
12 years ago

#9 @obenland
12 years ago

  • Keywords has-patch added; needs-patch removed

Fix attached.

#10 @lancewillett
12 years ago

  • Owner set to lancewillett
  • Resolution set to fixed
  • Status changed from new to closed

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.

Note: See TracTickets for help on using tickets.