Same height columns not responsive in mobile view

[katinatrout]

Hi there,

I have added the following to my site’s theme option> CSS to create columns of the same height with a space between the columns when they stack in small/mobile screen view:

.sameheight .x-container {
display: flex;
}
@media (max-width: 767px) {
.matchup .x-column.x-1-3 {
margin-bottom: 45px;
}
.matchup .x-column.x-1-3:last-of-type {
margin-bottom: 0;
}
}

However, when I add class ‘same height’ to the section, the 3 columns are not responsive in small/mobile screens. The class ‘matchup’ works alone when the columns are not the same height.

Can you help re what to do to have the same height columns responsive + have the gap between them when they stack.

Thanks!
K

[nico]

Hi @katinatrout,

Thanks for writing in.

I could not be able to replicate your site in my setup. Would you mind sharing us your URL so we could check your setup closer.

Thanks.

[katinatrout]

Hi Nico,

This is the page with the sameheight columns - http://www.arystalifescience.com.au/products/fungicides

In the other product pages I’ve only applied the ‘matchup’ class.

Cheers,
K

[christian]

Hey K,

Change the code from this:

.sameheight .x-container {
display: flex;
}

To this:

.sameheight .x-container {
    display: flex;
    flex-wrap: wrap;
}

Hope that helps.

[katinatrout]

Hey Christian,

Thanks, that works well for the small/mobile view, but for the 3 larger screen views it now only fits 2 columns wide, throwing the 3rd right hand column below on its own?

Cheers,
K

[friech]

Hi K,

What screen-size do you get that issue? Sorry I can’t replicate it on my end, your row is 3 columns, and stack altogether in screen 767px and below. Please clarify.

Thanks,

[katinatrout]

Sorry, it happens for the 768-979 px, 980-1199px and 1200px & up views

K

[friech]

Hi There,

This is that page, right? I can’t replicate that issue on my end.

This is what I get

(https://prnt.sc/ja7d33)
(https://prnt.sc/ja7dta)
(https://prnt.sc/ja7dbb)
(https://prnt.sc/ja7ddi)

Try clearing your browser’s cache or use the incognito/private mode of your browser.

Thanks,

[katinatrout]

It must be something my end then - it still shows like that in wordpress even after I cleared the cache - but I had a friend check and she said it looked ok on the website.

Thanks for all your help!

K

[nabeel]

Glad we could help.

Cheers!