How to make the product image smaller on mobile page (Dawn theme)

Technical Q&A
, ,
1

Hello,

I would like to reduce the product image on the mobile view for my website.
So customers have to scroll less and more information is visible at first glance.
I tried many codes in other discussions, but they didn’t work.

Below is the current state on mobile view.

IMG_7FDC99FB57E1-1.jpeg
IMG_7FDC99FB57E1-1.jpeg1170×2532 122 KB

Store URL: https://dealvolution.com/
I am using the Dawn theme 7.0.1

Thanks in advance!

2

Hi @Dealvolution ,

This is Kate from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .product__media-wrapper slider-component {
        max-width: 80%;
        margin: 0 auto !important;
    }
}

I hope it would help you
Best regards,

Kate | PageFly

5 Likes
3

Hi @PageFly-Kate ,

Thank you very much!
This is what I was looking for.

Best regards,
Dealvolution

1 Like