Take the 2-minute tour ×

I've created a twitter feed to put on a website. You can see the feed here: anibalcascais.com/tweet/twitter.html

I'm trying to make the feed responsive. So far, the surrounding div is responsive. The problem is when the browser window is resized to ipad/iphone size, the li element doesn't resize and some tweets are cut short.

How can I make the ul and li expand to acomodate either one line or two lines tweets?

Thank You

share|improve this question

1 Answer 1

you have the following regarding height:

.tweet_list {
    height: 28px;

instead of setting the height of the ul explicitly so it shows only the first li, I'd try something like:

.tweetlist>li {display: none;}
.tweetlist>li:first-child {
   display: block;

that way you can let the ul autosize to the size of the first in your current list which will make it work for both 1 and 2 line-sized tweet-li's

share|improve this answer
Thanks you. Let em try that! –  Anibal Cascais Santos Aug 17 '12 at 19:03
ok, the code you kindly provided seems to do the trick. The only problem is taht it works for the first feed item. As soon as the next feed slides in, it disappears... (working link at original post) Thank You! –  Anibal Cascais Santos Aug 17 '12 at 20:53
hm, I tested in firefox which has it work fine, looking a bit further adding .tweetlist { min-height: 28px;} fixes it for opera, but it still doesn't quite do the correct thing in chrome –  cobaco Aug 17 '12 at 21:31
chrome doens't reapply the css :first-child when it changes as you shuffle the first list item to last place –  cobaco Aug 17 '12 at 21:43
I see that in firefox it works fine. Thanks for pointing that :) –  Anibal Cascais Santos Aug 17 '12 at 21:51

Your Answer


