Register | Login

Responsive same height boxes jQuery function

Are your featured posts not aligning due to different length excerpts and titles?

Unfortunately CSS can’t really help here unless we set lots of different heights at different breakpoints to accommodate for the text. This is what I call a “hacky” approach.

If you are looking for a smooth responsive solution the code below will be your new best friend. I use this code in all of my web builds and it’s just awesome! Take a couple of minutes to quickly scan over the code, it’s pretty simple, but effective.

 

 

 

How to implement it in your HTML

Simply add one of the classes listed in the code above to all elements that you want to be the same height.

For example:

 

Note that if you use the same class on two different groups of elements on the same page they will all end up the same height. If you are running out of classes from the ones I have provided just add more.

 

“same-height-all” or just “same-height”…

Ok so you spotted that in the jQuery there are two similar bits of code…

 

Use the .same-height-all classes if your boxes are going to constantly be side by side and never stack to a single column.

However in most cases a responsive multi-column layout will break to a single column on a mobile device, at which point the same-height functionality is no longer required. Therefore you would use the .same-height classes as they only come into effect at a specified window width, in this case 700px. You would obviously change this value in the jQuery to match your single column breakpoint.

James koussertari

RECENT TUTORIALS

Leave a reply

We use cookies to ensure that we give you the best experience on our website.