WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 5 years ago

#21383 closed defect (bug) (fixed)

Twenty Twelve - fixed width content breaks responsive layout for mobile

Reported by: chriswallace Owned by: 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 5 years ago.
Smaller viewport with fixed width content inside post.
21383.diff (389 bytes) - added by obenland 5 years ago.

Download all attachments as: .zip

Change History (12)

#1 @chriswallace
5 years ago

  • Component changed from Themes to Bundled Theme

#2 @SergeyBiryukov
5 years ago

  • Milestone changed from Awaiting Review to 3.5

#3 @lancewillett
5 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
5 years ago

  • Cc konstantin@… added

#5 @drewstrojny
5 years ago

  • Cc dstrojny@… added

#6 @chriswallace
5 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
5 years ago

Smaller viewport with fixed width content inside post.

#7 @obenland
5 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
5 years ago

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

@obenland
5 years ago

#9 @obenland
5 years ago

  • Keywords has-patch added; needs-patch removed

Fix attached.

#10 @lancewillett
5 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.