Adjusting Photo Sizes for Mobile View Only

[RLopez]

Hi there! Is there a way to adjust the image sizes for the mobile template only while keeping the desktop ones the same? Attached below is a mock-up of what we would like the site to look like according to each view, but as far as I can see, there is only one slider that adjusts both sizes.

Link: www.Cocoandcobakery.com

Theme: New

[made4Uo]

Hi @RLopez ,

You can minimize the width of the image in mobile by following the code below.

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the theme.css file
3. At very end of the code, add the code below

@media only screen and (max-width: 481px) {
.grid__item.medium-up--one-third.text-center > div:first-child {
    width: 160px;
}
}

[PageFly-Richard]

Hi @RLopez , This is Richard from PageFly - Landing page builder.

You can try this code by following these steps:

Go to Online store => themes => actions => edit code and add this code on file theme.liquid before tag

I hope it would help you Best regards,

Richard | PageFly

[RLopez]

Awesome! Thank you so much!

[RLopez]

Thank you so much for your response!