Adding columns to gallery for mobile display

[jenbourge]

Hi i am using theme Envy 26.5.0 and i have galleries with 3 images across. On the mobile display the images are in one column. I would like the images in 2 columns for mobile. Please can someone help? & please can you give as much detail as possible as i'm very new to coding.

Thanks 🙂

[suyash1]

@jenbourge - can you please share this page link where yo have these columns?

[jenbourge]

Hi it is not live im working on a duplicate theme. Would some screenshots help?

[suyash1]

@jenbourge - preview link would be better, so css can be shared?

[jenbourge]

https://gfzszy39p66qyyo3-8947528.shopifypreview.com

[suyash1]

@jenbourge - 1 issue, your row have 3 images and 4 such rows , hence on mobile when we try to make 2 images in a row, it leaves space for 4th image like screenshot

[jenbourge]

Hi,

thanks for this, I have changed this to 4 rows. What do i need to do next?

[jenbourge]

Hi, Now that I have the gallery in 4 rows on desktop view, what code do I need to make the mobile view 2 columns? 

Thanks

[suyash1]

@jenbourge - add this css to the very end of your theme-index.min.css file and check

@media screen and (max-width:749px){
.row.image-bar .grid__item.image-bar--single-column-mobile.wow {max-width: 50%;}
}

[jenbourge]

That has worked! thanks so much. I have 3 galleries stacked, is there a way to reduce the spacing between them?

Thanks

[suyash1]

@jenbourge - please add this css and check

@media screen and (max-width:749px){
.homepage-sections-wrapper{padding: 20px 0;}
.row.image-bar .grid__item.image-bar--single-column-mobile.wow{margin-bottom: 1rem;}
}