WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 2 years ago

Last modified 2 years 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 3 years ago.
A fix for Twenty Eleven
twentytwelve.21680.diff (454 bytes) - added by kovshenin 3 years ago.
A fix for Twenty Twelve
twentyeleven.21680.2.diff (523 bytes) - added by kovshenin 3 years ago.
Now with a space, yey!
twentytwelve.21680.2.diff (455 bytes) - added by kovshenin 3 years ago.
Now with a space, yey-x2!

Download all attachments as: .zip

Change History (11)

@kovshenin3 years ago

A fix for Twenty Eleven

@kovshenin3 years ago

A fix for Twenty Twelve

comment:1 @kovshenin3 years 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: @lancewillett3 years 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 @kovshenin3 years 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.

@kovshenin3 years ago

Now with a space, yey!

@kovshenin3 years ago

Now with a space, yey-x2!

comment:4 @lancewillett3 years ago

  • Cc obenland added

comment:5 @lancewillett3 years ago

In [21637]:

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

comment:6 @lancewillett2 years 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 @kovshenin2 years ago

Thanks @lancewillet!

Note: See TracTickets for help on using tickets.