WordPress.org

Make WordPress Core

Opened 13 months ago

Closed 13 months ago

Last modified 13 months ago

#23994 closed defect (bug) (fixed)

Twenty Thirteen: image floating right pushes beyond site width in mobile view

Reported by: RDall Owned by: lancewillett
Milestone: 3.6 Priority: normal
Severity: normal Version: 3.6
Component: Bundled Theme Keywords: has-patch
Focuses: Cc:

Description

When viewing a standard post in twenty thirteen in a mobile view or mobile device a attachment. In this case an image aligned right pushes beyond the site width. You can see this effect in the full length screen capture. (I have added the arrows)

http://f.cl.ly/items/0l0f1F450612101U1Z0E/2013-04-08_RobertDall.com_Just%20another%20WordPress%20site.png

Screenshot with no arrows:
http://f.cl.ly/items/29060E2L0F1q3e2W2d40/2013-04-08_RobertDall.com_Just%20another%20WordPress%20site.png

You may have to click on the image to zoom to full size.

Also here is another view showing the image with the box model overlay (captured from firebug)
http://cl.ly/image/0O0U0I2O3K2C

The issue seems to resolve itself at the 724px width. See screen capture:

http://cl.ly/image/2l0Z201A0w0F

Attachments (1)

23994.diff (659 bytes) - added by obenland 13 months ago.

Download all attachments as: .zip

Change History (8)

comment:1 lancewillett13 months ago

  • Milestone changed from Awaiting Review to 3.6
  • Summary changed from Image floating right pushing beyond site width in Mobile view to Twenty Thirteen: image floating right pushes beyond site width in mobile view

Thanks for the report, I had seen this once on the Twenty Thirteen WP.com demo site but wasn't able to repeat it.

comment:2 celloexpressions13 months ago

I'm getting this issue pretty consistently and badly, see this site (sorry - child theme, but it only touches colors and header/footer for the most part). Issue is on both right and left floated images/captions at almost any screen size in every browser (html is wp-generated from inserting images).

In larger viewports, it just looks weird since the headings and main content are constrained to the relatively small 724px, but images pop out farther. On smaller viewports, you can scroll right to uncover the hidden portion, but parts of the images and captions on the left are completely inaccessible. The issue has come up in standard and image post formats for me.

It looks like removing lines 1178-1186 in style.css (margin-left/right: -60px) fixes it for all viewports... is there any reasoning for setting a margin to push these outside of the content area?

comment:3 obenland13 months ago

This worked previously. :(

Let me fight on to fix that!

obenland13 months ago

comment:4 obenland13 months ago

  • Keywords has-patch added; needs-patch removed

Could you do me a favor and test the patch on your installs?

comment:5 lancewillett13 months ago

I can confirm the patch fixes the reported issue, testing with http://themebuster.wordpress.net/ both before and after patch.

comment:6 lancewillett13 months ago

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

In 23945:

Twenty Thirteen: fix for right-aligned images breaking the main column layout in small screen sizes. Props obenland, fixes #23994.

comment:7 RDall13 months ago

Love the WordPress testing site… Themebusters R Us… :-)

Note: See TracTickets for help on using tickets.