Quick Tip: How to Make Tweet Embeds Responsive

Hey there! I'm currently working on a CLI tool to deploy WordPress apps to DigitalOcean. Check it out! It's free and open source.

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.

About the author

Konstantin Kovshenin

WordPress Core Contributor, ex-Automattician, public speaker and consultant, enjoying life in Moscow. I blog about tech, WordPress and DevOps.

1 comment