Support » Themes and Templates » Responsive » [Resolved] [Theme: Responsive] Specific widget box size?

[Resolved] [Theme: Responsive] Specific widget box size?

  • Hello, I’ve been working on this for a few days now and nothing I’ve tried has worked (I’m not to great at coding…) Basically what I am trying to do is find out how I can set the detentions of the 3 homepage widget boxes. The left one and center one are fine because I’m just using text in them, but the right one is whats giving me problems, I have a Twitter widget in that box (My Twitter Widget) and the box resizes every time I make a Tweet, if the Tweet is longer then the box goes down and gets bigger, and if it’s a shorter Tweet the box goes smaller and then it’s never the same size as the other two boxes and doesn’t look very good. I’ve spent quite some time in the CSS of the theme tinkering around with things to try and fix this but nothing I do works. I was thinking of changing the position property (static,absolute, etc.) but I can’t seem to find it or where to place it. I hope someone understands what I’m trying to say, sorry if I’m not being to clear it’s 3am here and I’ve been working on this for quite a long time. If anyone could please help me out with figuring this out, it would be extremely appreciated!

    Thank you!


Viewing 12 replies - 1 through 12 (of 12 total)
  • Basically what you need to do is to set a specific width to your widget in pixels.


    Yeah but thats where the problem is, I’m not to sure how to do this… I’ve looked but I can’t seem to find it in the style.css or anything. Any help or an example of code to add would be greatly appreciated!


    Post a link to your website if it’s live.

    Sure thing, I just put it live and the sites not quite done so I used a url shortener:



    I can’t see any overflowing content on this site, but adding

    .col-300 {
        max-width: 31.9149%;

    should help!

    I gave that a try but it didn’t seem to work, oh and sorry if I was unclear but I wasn’t referring to overflowing content, I actually meant the box which the widget is in, I’m not sure how to explain it so I’ve taken a screenshot:


    You see how the height of the 3rd one is larger than the first and second widget? Well I really need them to all be the same height, and the third one that is larger will move and get smaller and bigger as I tweet, If I was to tweet 10 characters then the box would be shorter than the first and second, but if I tweet 140 characters then the box goes bigger than the other two, if that makes any sense. I basically just need to set a height of the widget so it will stop moving as content inside the widget gets larger/smaller.

    Thanks for all the help!

    If you want equal height widgets, the simplest way is to set a fixed width to #my_twitter_tweetlist, and also add overflow: hidden to it.

    The problem here is that the content of the widget will be chopped off and look really ugly. To make the content fade out at the bottom, create a png image with gradient from the foreground color (#f9f9f9 in your case) to transparent and position it inside that widget. The fade out effect will look aprox. like that: http://cdn.css-tricks.com/wp-content/uploads/2007/08/bottomfade2.png. See an example of this technique over there: http://css-tricks.com/css-trick-fade-out-the-bottom-of-pages-with-a-fixed-position-image/.

    I know that sounds awfully complicated but this is how it is!

    Alright thanks a lot for all the help! I finally got it to stay at a specific size, although it looks kind of ugly when I do smaller tweets because there is a gap in between each tweet, but there is no gap when I do full ones. This will have to do for now, I’ll probably work on it more once I get some other stuff done, spending to much time on this one though haha, thanks again!

    @an0nymous please note that we have a dedicated support and best of all it’s 100% free.

    earlier suggestion:

    .col-300 {
        max-width: 31.9149%;

    is big no-no, col-300 is part of the Responsive grid for entire Theme, not just widgets and we don’t want to touch that. Give us more details and post your question directly in our forum.

    max-height or max-width when needed can be applied to #widgets instead.


    Going over old posts, please let me know if more assistance is needed.


    I have a similar question, I am trying to reduce the height of the widgets to fit the shape of the images I am placing on them.

    Would you please tell me what code and where I need to place it.

    I believe I have read somewhere to copy the sidebar.php from responsive into my child theme, and then edit the height there. The problem is that I do not know were to copy that .php into.

    Thanks for your help,



    Forum Moderator

    @fdr_ny – this is an old thread that is already marked resolved – so it won’t be a good place to get help. Please see the Responsive forums here:


Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘[Resolved] [Theme: Responsive] Specific widget box size?’ is closed to new replies.
Skip to toolbar