WordPress.org

Ready to get started?Download WordPress

Forums

Responsive
Responsive- home page bottom widgets height issue (11 posts)

  1. rhae52
    Member
    Posted 1 year ago #

    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?

    http://wordpress.org/extend/themes/responsive/

  2. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    I can see all three at the same "level" but you can do this too http://themeid.com/forum/post/6762/#p6762

    Thanks,
    Emil

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

  3. rhae52
    Member
    Posted 1 year ago #

    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.

  4. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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 :)

    Emil

  5. rhae52
    Member
    Posted 1 year ago #

    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.

    Thanks.

  6. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

  7. rhae52
    Member
    Posted 1 year ago #

    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.

  8. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    Hi,

    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?

    Emil

  9. rhae52
    Member
    Posted 1 year ago #

    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?

  10. Emil Uzelac
    Theme Review Admin
    Posted 1 year ago #

    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 :)

    Emil

  11. rhae52
    Member
    Posted 1 year ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic