Support » Themes and Templates » Responsive- home page bottom widgets height issue

Responsive- home page bottom widgets height issue

  • Hi:

    Please help, I’m stumped. I need the three home page widgets divs to be equal height. Currently, they are all utilizing the page excerpt widget. I have tried the WP Equal Column plugin and various jquery plugins on the site. I tried the post ‘http://wordpress.org/support/topic/equal-columns-how?replies=11’ which failed.

    The site is http://dev.mgmtbsolutions.com/. Currently, the containers look equal, but that is due to the length of the excerpts are all close in character length.

    Can anyone tell me what I am doing wrong?


Viewing 10 replies - 1 through 10 (of 10 total)
  • I can see all three at the same “level” but you can do this too http://themeid.com/forum/post/6762/#p6762


    P.S. I’ve noticed that you also have a horizontal scroll (big one) due to either social icons or …

    Thanks for the response. The issue is that all three widgets have dynamic content from the page excerpt widget. They just happen to be the same size at this moment and my client will have control of what is displayed this point forward. Therefore, I need to have columns of equal height for dynamic content. All the jquery tricks have not worked.

    Thanks for pointing out the horizontal scroll; it did not register as a priority.

    You can still do min-height for all of them, regardless of the dynamic content. All you need to do is kind of “count” the longest excerpt and use that as your min-height, excerpt are usually not that long anyways 🙂


    As for now, the widgets look fine, however, I am turning the site over to a client in which I will have no control on the size of the content that is placed in the widgets. It is a certainty that they will add more text and the character/line lengths will not be equal. The min-height will not fix the issue. I need help either implementing the WP equal columns plugin or a jquery plugin.


    OK. This is what I attempted to do.
    *I save the .js file in my theme/js folder.
    *I link to the script file in the head of the header.php doc. I am using an absolute path.
    *Then I call the function <script type=”text/javascript”>$(function(){ $(‘#widget_container’).equalHeights(); });</script> in the head.
    *The three widgets are wrapped in the “widget_container” div.

    What am I missing?
    Thank you for your assistance.


    Not really sure yet, this is what I came across. Did you see the actual demo http://filamentgroup.com/examples/equalHeights/ maybe you can get more details from there?


    I went in to the source code to emulate the page’s structure and copied the script. This is probably the third jquery plugin I have tried and nothing has worked. I am also using PIE for corners and another script called gradius.js which allows for a gradient background and rounded corners in IE. Could there be a conflict?

    I would say yes. PIE.htc does add the extra gap if I’m not mistaking. For the gradient in IE no need to use JS at all.

    Here’s what I have for several different browsers including the IE

    background-image:-webkit-gradient(linear, left top, left bottom, from(#585858), to(#3d3d3d));
    background-image:-webkit-linear-gradient(top, #585858, #3d3d3d);
    background-image:-moz-linear-gradient(top, #585858, #3d3d3d);
    background-image:-ms-linear-gradient(top, #585858, #3d3d3d);
    background-image:-o-linear-gradient(top, #585858, #3d3d3d);
    background-image:linear-gradient(top, #585858, #3d3d3d);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#585858, endColorstr=#3d3d3d);

    less is more 🙂


    The ‘gradius.js’ plugin is needed because IE won’t render rounded corners and gradients together. Thanks, I’ll look into PIE.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Responsive- home page bottom widgets height issue’ is closed to new replies.