Responsive- home page bottom widgets height issue

I can see all three at the same “level” but you can do this too https://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 …

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 ??

Emil

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.

How about this: https://filamentgroup.com/lab/setting_equal_heights_with_jquery/ ?

Emil

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.

Hi,

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

Emil

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 ??

Emil

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