Using oEmbed you can easily display tweets in your WordPress posts, simply by entering the URL.
But you might find the embedded iframe and its surrounding tags come with some inline styles that make your design look a bit odd.
How the embed code looks
Once Twitter’s JavaScript has been loaded, the code for a tweet might look a little something like this:
<div class="twitter-tweet twitter-tweet-rendered" style="display: flex; max-width: 500px; width: 100%; margin-top: 10px; margin-bottom: 10px;"><iframe id="twitter-widget-0" scrolling="no" allowtransparency="true" allowfullscreen="true" class="" style="position: static; visibility: visible; width: 500px; height: 703px; display: block; flex-grow: 1;" title="Twitter Tweet" src="https://platform.twitter.com/embed/Tweet.html" data-tweet-id="9999999999999999999" frameborder="0"></iframe></div>What we want to change
Let’s look at the inline CSS in the opening tag of the div container.
In particular, it contains properties for specifying a ten pixel margin above and below the element:
<div class="twitter-tweet twitter-tweet-rendered" style="display: flex; max-width: 500px; width: 100%; margin-top: 10px; margin-bottom: 10px;">How to adjust the style
You can easily override this by using the !important rule in your theme’s style sheet, or inline in the <head> of your document.
The
W3Schools!importantrule in CSS is used to add more importance to a property/value than normal.
To get rid of the margins, try this:
.twitter-tweet {
margin-top: 0 !important;
margin-bottom: 0 !important;
}Alternatively you may want to adjust the unit of measurement that’s being used so it matches your theme, e.g.
.twitter-tweet {
margin-top: 1em !important;
margin-bottom: 2em !important;
}
Leave a Reply