Twitter embeds can break the layout in responsive bundled themes

[kovshenin]

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.

[kovshenin]

A fix for Twenty Eleven

[kovshenin]

A fix for Twenty Twelve

[kovshenin]

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

[lancewillett]

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.)

[kovshenin]

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.

[kovshenin]

Now with a space, yey!

[kovshenin]

Now with a space, yey-x2!

[lancewillett]

In [21637]:

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

[lancewillett]

In [22196]:

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

[kovshenin]

Thanks @lancewillet!