By default WordPress twitter embedded tweets have a fixed width of 550px which is added to the inline style with an !important declaration to stop you overriding it. This breaks responsive layouts and causes horizontal scrolling as soon as your site is viewed at less than 550px wide.
Add the following to your themes functions.php file:
add_filter('oembed_result','twitter_no_width',10,3);
function twitter_no_width($html, $url, $args) {
if (false !== strpos($url, 'twitter.com')) {
$html = str_replace('width="550"','',$html);
}
return $html;
}
This removes the hardcoded 550px width from the generated output. If you’ve got existing embedded tweets you’ll need to re-save the posts to regenerate the embed code.
Thanks to Otto for the tip.
This doesn’t seem to be working for me.
hmm… it’s still working here. What theme / version of WordPress are you using?
This seems to be more easy then the one above
.entry-content .twitter-tweet-rendered {
max-width: 100% !important;
}
http://kovshenin.com/2012/quick-tip-how-to-make-tweet-embeds-responsive/
I’m not sure the width=550 attribute exists anymore. Twitter throws an !important 440px width in the twitter-tweet-rendered style.
This developer came up with a JQuery solution to remove it. Not elegant, but works.
http://sanerdesign.com/2012/07/twitter-embed-width-issue-wordpress-fix/
function didn’t work for me, but Jasdeep’s CSS code did a good job 🙂 Thanks for sharing