Preventing Gallery Image stacking on Mobile - Envy Theme

Store Design
1

I’m using Envy theme. Does anyone know how to prevent the four images in the Gallery on my homepage from stacking on mobile?

My Shopify site is: olivia-rust-collection.myshopify.com

Desktop View:

Screen Shot 2022-02-08 at 9.32.01 AM.png
Screen Shot 2022-02-08 at 9.32.01 AM.png1290×699 119 KB

Mobile View:

IMG_1690 2.PNG
IMG_1690 2.PNG1284×2778 229 KB

2

Hi @oruest ,

Do you want 4 Gallery images on mobile to show 1 row like desktop?
Please confirm again, so we can help you

Thank you!

3

Hi!

Yes, I would like 4 Gallery images on mobile to show in 1 row like the desktop.

Thank you!

4

@AvadaCommerce

Yes, I would like 4 Gallery images on mobile to show in 1 row like the desktop.

Thank you!

5

Hi @oruest ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme-index.min.css->paste below code at the bottom of the file:
@media (max-width: 767px) {
    #shopify-section-1610589524a71d68d3 .image-bar {
    flex-wrap: nowrap;
    overflow: auto;
}

#shopify-section-1610589524a71d68d3 .image-bar .grid__item {
    width: 70%;
    min-width: 70%;
}
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.