Quick Tip: How to Make Tweet Embeds Responsive

Twitter embeds were introduced in WordPress 3.4, allowing you to insert tweets by pasting a link to that tweet on a line of its own, in you post or page content. However, many responsive themes (including mine) resulted in broken layouts on narrow screens, since the embedded tweet will get a fixed width of 550 pixels. After a little poking around, I found an easy way to solve this with some CSS magic:

.entry-content .twitter-tweet-rendered {
    max-width: 100% !important;
}

Where entry-content is the class name of your content wrapper, which can be different for different themes. This will make sure that the rendered tweet block will scale along with its container. Obviously, if your existing theme is not responsive, this trick will probably not work, try Twenty Eleven ;)

You can also try stripping out the width argument by filtering on oembed_result like Otto mentioned but I think CSS is the better way to go. Tested on Android and iOS 5.

Update: Created a core ticket for Twenty Eleven and Twenty Twelve — #21680.