Gallery Images on Desktop Not Optimized For Mobile (Theme: "Showcase")

Technical Q&A
1

Greetings Shopify Community!

I was wondering if I may trouble you all for some help in regards to my Shopify site. I’m still in developing stage of the site and I’ve been having issues with the main gallery (full size/length photos that you see at the top of the site) not readjusting its size when accessing the site through the mobile platform.

It seems to just zoom in on the photos instead of adjusting the dimensions/scaling for mobile viewing. Is this an issue with the image itself? I’d really prefer not to redo them so if someone has a better solution I would be eternally grateful!

Please feel free to take a look at my site to see exactly what I’m talking about:

www.pawtrit.com

Thanks again!

2

Please place this code at the end of theme.scss

@media (max-width: 600px) {
.rimage-outer-wrapper {
background-size: contain;
    background-position: center !important;
    min-height: 440px !important;
}
.slick-slider  {
background-color: #000000 !important;
}
}
3

Thank you so much for your response!

Though I think I did as instructed, I don’t believe it worked.

Would theme.scss be the same thing as theme.liquid? I’m having a hard time locating where it is.

And to be clear, I wanted the whole photo to be displayed on a mobile screen if possible. I’ve attached some photos below if it helps.

So basically, I just want the photos to scale according to size.

Thanks again!

Desktop
Desktop1920×1079 282 KB

Mobile
Mobile1080×2220 304 KB

4

Online Store → Themes → Edit Code → Assets → theme.scss.liquid

5

You are a lifesaver! Thank you!