WordPress.org

Make WordPress Core

Opened 20 months ago

Closed 19 months ago

Last modified 19 months ago

#21680 closed defect (bug) (fixed)

Twitter embeds can break the layout in responsive bundled themes

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

Description

Embedded tweets (via oembed) come with a fixed width of 550 pixels. This can cause the layout to break for Twenty Eleven and Twenty Twelve on narrow screens.

Attachments (4)

twentyeleven.21680.diff (522 bytes) - added by kovshenin 20 months ago.
A fix for Twenty Eleven
twentytwelve.21680.diff (454 bytes) - added by kovshenin 20 months ago.
A fix for Twenty Twelve
twentyeleven.21680.2.diff (523 bytes) - added by kovshenin 20 months ago.
Now with a space, yey!
twentytwelve.21680.2.diff (455 bytes) - added by kovshenin 20 months ago.
Now with a space, yey-x2!

Download all attachments as: .zip

Change History (11)

kovshenin20 months ago

A fix for Twenty Eleven

kovshenin20 months ago

A fix for Twenty Twelve

comment:1 kovshenin20 months ago

  • Keywords has-patch added

The attached patches fix things for Twenty Eleven and Twenty Twelve via the max-width property, tested on an Android Nexus S and an iOS 5 simulator. Here's a screenshot:

http://f.cl.ly/items/3u3v3w1F473P1C3u2v0A/twitter-embeds.png

comment:2 follow-up: lancewillett20 months ago

  • Milestone changed from Awaiting Review to 3.5
  • Type changed from enhancement to defect (bug)

Nice report and patch, thanks.

Does the rule really need the !important?

The selector is specific enough it shouldn't be necessary. (Also note there should be a space between the property's value and the important declaration.)

comment:3 in reply to: ↑ 2 kovshenin20 months ago

Replying to lancewillett:

Thanks Lance! Twitter embed places an inline style of "width:550px!important" to the div, as well as a "max-width:550px!important" with the .twitter-tweet-rendered selector in their embed stylesheet, so to have priority over that, I had to use !important and specify a parent class name, which is kinda hacky, but I couldn't think of anything cleaner.

kovshenin20 months ago

Now with a space, yey!

kovshenin20 months ago

Now with a space, yey-x2!

comment:4 lancewillett20 months ago

  • Cc obenland added

comment:5 lancewillett20 months ago

In [21637]:

Twenty Twelve: add rule to force override the fixed width for Twitter embeds. Props kovshenin, see #21680.

comment:6 lancewillett19 months ago

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

In [22196]:

Twenty Eleven: add rule to force override the fixed width for Twitter embeds. Props kovshenin, fixes #21680; see also r21637.

comment:7 kovshenin19 months ago

Thanks @lancewillet!

Note: See TracTickets for help on using tickets.