Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Gina Bégin
Courses Plus Student 8,613 PointsHow 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
Andres Altuve
16,274 PointsHi Gina,
In your CSS add the following classes:
.timeline .stream { height: 340px !important;}
ol.h-feed {height:340px !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..
Andres Altuve
16,274 PointsHi 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:380px !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
Gina Bégin
Courses Plus Student 8,613 PointsHi Andres Altuve — thanks so much for sticking with me here. I deleted the other code from the CSS and inserted the one you listed in the comment above in its place instead. And there's still no scrolling. Was I supposed to change something in the HTML as well? Or just replace the previous css code with
twitter-widget-0 {height:380px !important;}
Andres Altuve
16,274 PointsHi 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:380px !important;}
Let me know how it goes.
Gina Bégin
Courses Plus Student 8,613 PointsGina Bégin
Courses Plus Student 8,613 PointsThanks, Andres Altuve! That did work to limit the height — but I changed it so that it is 4 tweets that show (so that the size is correct) but there's no way to see more (no scrolling down to see more on the feed).
I have seen some widgets that don't have a scrollbar featured and are compact in size, but you can still scroll internally through the feed by placing your cursor inside the widget and scrolling (usually using a mouse roller thing or your laptop's trackpad). Any idea how to do this? I like the design without the scrollbar, but want people to be able to be able to scroll through.
Also, do you know if I have to add the code you included to each style sheet? The template I am working with has about 6 style sheets (which seems strange?), including one called style-mobile.css. Would I need to put this into each one?