Adding columns to gallery for mobile display

jenbourge
Tourist
18 0 2

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 🙂

 

Replies 10 (10)

suyash1
Shopify Partner
9447 1177 1516

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
jenbourge
Tourist
18 0 2

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

 

suyash1
Shopify Partner
9447 1177 1516

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

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
suyash1
Shopify Partner
9447 1177 1516

@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

 

suyash1_0-1718113035434.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
jenbourge
Tourist
18 0 2

Hi,

 

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

jenbourge
Tourist
18 0 2

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
Shopify Partner
9447 1177 1516

@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%;}
}

 

suyash1_0-1718184613930.png

 

To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me
jenbourge
Tourist
18 0 2

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

 

Thanks

suyash1
Shopify Partner
9447 1177 1516

@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;}
}
To build shopify pages use pagefly
You are welcome to contact me - suyash.patankar@gmail.com , My timezone is GMT+5:30.
Support me