Menu
The code Twitter gives you to paste in the html looks like this:
<a class="twitter-timeline" href="https://twitter.com/username" data-widget-id="248169276782018560">Tweets by @username</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
They allow you to set a height, which I set to 600. When placed on my site I get this (when viewing the source):
<iframe id="twitter-widget-6" classname="twitter-timeline twitter-timeline-rendered" scrolling="no" frameborder="0" style="border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; border-width: initial; border-color: initial; " width="220" height="600"></iframe>
The 220 width is what is killing me. I want the width to be the full width of the container, which is 100% (for a mobile site). Currently the 220 width goes a little more than halfway across the page and displays an ugly scrollbar.
So, why is it setting the width to 220, and how can I get it to expand to it's parent width?
780
Go to https://publish.twitter.com/. Enter the URL of the timeline you'd like to embed. Customize the design by specifying the height and theme (light or dark) to match your website. Copy and paste the code into the HTML of your website wherever you would like the timeline to appear.
If you click that More Options button in the Twitter embed block's toolbar, you'll see a menu show up in the right sidebar. If you click Block at the top of it (if it isn't already selected), you'll see a Media Settings section. Toggle on the Resize for Smaller Devices button so that it's blue.
Unlike other, less complex social media buttons that just act as a link to your Twitter account, the Twitter widget gives your users the chance to explore your Twitter feed while enjoying your homepage – creating a strong link between the two.
I use a responsive theme and this css code works fine. Thanks Hjuster.
#twitter-widget-0 {
width: 100% !important;
}
Twitter allows you to adjust the width and height of the timeline widget via HTML width and height attributes BUT the minimum width they accept is 220 pixels EXAMPLE: width="220" , height="350"
FROM Twitters developers page: The minimum width of a timeline is 220px and the maximum is 520px. The minimum height is 350px.
43
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
