Set Height on Twitter Embed Feed

Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

How do you override Twitter's Embeddable Widget Height on HTML Site?

I've tried searching these forums for an update on setting the widget height for the embedded Twitter widget (https://support.twitter.com/articles/20170071). You can designate a height in the setting fields on Twitter (they have a form to create a semi-custom widget), but it doesn't go into effect when I add it to my HTML. Most of the forum questions on here are from 2013 (a different code from Twitter?) and don't seem to work for me.

I tried this JSFiddle code:

http://jsfiddle.net/mandykiwi/NbF7C/ but setting the height to !important in CSS didn't do anything for me. I may have done it wrong. I entered this into my styles.css sheet, as per the jsfiddle code:

.timeline .stream { height: 600px!important; }

My HTML came from Twitter, plus some of the code they provided for further customization:

<a class="twitter-timeline" data-theme="dark" data-chrome="transparent nofooter noheader noscrollbar" href="https://twitter.com/KGShowroom" data-widget-id="631599342176989184">Tweets by @KGShowroom</a>

<script> ! function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs"); </script>

(I've also tried it without the addition to the stylesheet.)

Another forum answer here on Stackoverflow says that the height is now set within the JS code that Twitter generates (HTML/CSS for Twitter widget width) but I'm not sure what that means; can it be changed?

I am not exactly sure what size I need it to be, but I know I need it larger than it is. I'm guessing 100% in height so that it can be responsive, but even doing it in px, it isn't changing.

This is the site I'm trying to work on this with: http://kgshowroom.com/test/index.html

3 Answers

Hi Gina,

In your CSS add the following classes:

                                                        .                    timeline                    .                    stream                    {                    height                    :                    340                    px                    !important                    ;}                                                        ol                    .                    h-feed                    {                    height                    :                    340                    px                    !important                    ;}                                  

This will leave you a huge blank space in your site, I think it happens because of the numbers of tweets you are displaying.. If you want twitter to have the same height as the other columns try to reduce the ammount of tweets being displayed to 3.. Hope it helps..

Hi Gina,

I got the widget working the way you want it, I copied the code you shared at the beggining of your post and checked the HTML..

When you use twitter widget code it creates an iframe containing the twitter feed, but it also creates a new Div that uses the following ID #twitter-widget-0 all you have to do is add the following line to your style.css

You don´t have to change any other line, just forget my first post.

                                                        #                    twitter-widget-0                    {                    height                    :                    380                    px                    !important                    ;}                                  

It works like a charm check it out twitter feed

I checked the styles, it seems the creator of the template used different css files for different media queries.. I would say add it to the following ones:

style-mobile.css style.css style-wide.css

Hi Gina,

How many tweets are you displaying? You shared the following code in your first post, which is the one I used on the example I created.

<script> ! function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0], p = /^http:/.test(d.location) ? 'http' : 'https'; if (!d.getElementById(id)) { js = d.createElement(s); js.id = id; js.src = p + "://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs); } }(document, "script", "twitter-wjs"); </script>

Replace the one you have right now and use the one you shared, which is the one I just added on top. (Remember to wrape it around the script tag), and keep the latest css code you used.

                                                        twitter-widget-0                    {                    height                    :                    380                    px                    !important                    ;}                                  

Let me know how it goes.

jenkinssuffeaked.blogspot.com

Source: https://teamtreehouse.com/community/how-do-you-override-twitters-embeddable-widget-height-on-html-site

Share this post