Solved

Image Gallery displayed stacked and large images on Mobile

FashionizerSpa
Tourist
5 1 1

I am having issues with the how my website is displayed on Mobile. I have a section for "Brands we work with" with an image gallery showing a 4X2 grid of logos. On desktop this looks great but on mobile they fill the entire screen and are displayed 1 by 1.

My url is https://fashionizerspa.com 

 

Capture.JPG

Accepted Solutions (2)
zack_dev
Shopify Partner
75 14 10

This is an accepted solution.

<style>

@media(max-width:768px){

div#shopify-section-template--14828124209198__1643820001bf1f6c8d .grid__wrapper {
    display: flex;
    flex-wrap:wrap;
}

div#shopify-section-template--14828124209198__1643820001bf1f6c8d .gallery__item {
    width: 44% !important;
}

}
</style>

 

please change the css to this one that should work.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

View solution in original post

FashionizerSpa
Tourist
5 1 1

This is an accepted solution.

Brilliant! It looks great now, thank you Zack.

View solution in original post

Replies 6 (6)

zack_dev
Shopify Partner
75 14 10
<style>

@media(max-width:768px){

div#shopify-section-template--14828124209198__1643820001bf1f6c8d .grid__wrapper {
    display: flex;
}

div#shopify-section-template--14828124209198__1643820001bf1f6c8d .gallery__item {
    width: 50% !important;
}

}
</style>

 

Hi you can try to place this code at end of theme.liquid file see it fixes the issue.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

FashionizerSpa
Tourist
5 1 1

Hi Zack, 

Thank you for getting back to me unfortunately they are now very small.

Capture2.JPG

zack_dev
Shopify Partner
75 14 10

This is an accepted solution.

<style>

@media(max-width:768px){

div#shopify-section-template--14828124209198__1643820001bf1f6c8d .grid__wrapper {
    display: flex;
    flex-wrap:wrap;
}

div#shopify-section-template--14828124209198__1643820001bf1f6c8d .gallery__item {
    width: 44% !important;
}

}
</style>

 

please change the css to this one that should work.



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

FashionizerSpa
Tourist
5 1 1

This is an accepted solution.

Brilliant! It looks great now, thank you Zack.

zack_dev
Shopify Partner
75 14 10

you are welcome !😊



- Helpful? Like or Accept solution, - Buy me Coffee


-

Contact me

FashionizerSpa
Tourist
5 1 1

I just tried to use this code for our other website https://hoteluniformshop.com/ and it hasn't worked for it:

Capture.JPG

Is there anything different I can do for this?