How to make my footer widgets expand to an equal height?

[matt101]

Hi,

I have 3 footer widgets on my site. One of the footer widgets contains an image. The site admin may decide to replace the current image and replace it with something bigger/ smaller. I would like these 3 footer widgets to expand to the same height.

I have tried using display:flex with align-items: stretch` but am struggling to make this work.

I have created a jsfiddle with an example https://jsfiddle.net/d4q05to6/4/

Basically I would like the two yellow boxes (you might need to make the results area bigger), to be the same size and re-ajust automatically, if the image has been changed. I would really appreciate some help!

[matt101]

Here is a simplified version of the JS fiddle, with all the unnecessary code taken out https://jsfiddle.net/d4q05to6/5/ . Please can someone help me? I want to make both the footer widgets the same height, if the site user decides to change the image for a smaller/bigger one, the footer widgets need to re-size their height automatically.

[Craig]

Hi Matt, this is something which I would usually use jQuery to achieve. I have a custom plugin very similar to Tim Svenson's Equalize (found here: http://tsvensen.github.io/equalize.js/) which I would be set to loop through selected divs (ie .footer-widgets > div) and then give them all a specific height which is equal to the tallest div.

---

@craigsimps | craigsimps.com

[matt101]

Hi Craig,

Thank-you for the response. I tried using Tim Svenson's equalize but couldn't seem to make it work with my code.

I found this http://wpsmith.net/2012/genesis/resize-genesis-footer-widgets-to-equal-sizes/ which seems to be quite close, as I am using the genesis theme on wordpress. I created a new JS fiddle but just can't seem to make it work https://jsfiddle.net/d4q05to6/8/

Thank-you for the support, it is very much appreciated.

[matt101]

Hi Craig,

Thank-you for the support. I tried using Tim Svenson's equalize but just couldn't seem to make it work. I found this which seems relevant as it is based on genesis http://wpsmith.net/2012/genesis/resize-genesis-footer-widgets-to-equal-sizes/ . I created a new JS fiddle but just can't seem to make it work https://jsfiddle.net/d4q05to6/8/

Thank-you for the support, it is very much appreciated.

[wasanajones]

for anyone looking for a solution, this works great https://wordpress.org/plugins/matchheight/

doesn't add bloat, works quick and easily

[Author]

Posts