Same Height on Columns in Row - Desktop vs Mobile

I read the following post and it solved my problem on Desktop, but the mobile I would like it to ignore equal height. How can I accomplish this?

The js code I used was this:

jQuery(document).ready(function($) {
var max = 0;
$(".x-column.same-height").each(function(index, el) {
if( $(this).height() > max ){
max = $(this).height();
}
});
$(".x-column.same-height").css(‘height’, max);
});

Hi Kevin,

We can override the height set by the JS using CSS media query.

Try adding this custom CSS:

@media (max-width:480px){
.x-column.same-height{
  height:auto !important;
}
}

!important will make sure it will override the inline height added by the JS. If this did not work as intended, please share the URL with issue so we can check.

Hope this helps.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.