Image Gallery displayed stacked and large images on Mobile

[FashionizerSpa]

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 

[zack_dev · 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.

[zack_dev]

<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.

[FashionizerSpa]

Hi Zack, 

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

[zack_dev · 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.

[FashionizerSpa · Accepted solution]

Brilliant! It looks great now, thank you Zack.

[zack_dev]

you are welcome !😊

[FashionizerSpa]

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

Is there anything different I can do for this?