How can I make a product image full width on mobile?

Store Design
1

Hi everyone,

I’m using the Debutify theme and I’m trying to make the product image full width on mobile. I can’t figure out how to do this.

How can i solve this?

My url is dolciabbracci.com

Thanks!

2

Hi @Ayo43 ,

Do you mean on product detail or product grid? Can you take a picture of the part you want to edit so I can help you?

Thanks you

3

Hi @AvadaCommerce ,

Thanks for answer me!

I mean the main image of the product.
Let me show you which one:

Show More

photo5927055861073688094.jpg
photo5927055861073688094.jpg716×1280 80.4 KB

4

Hi @Ayo43 ,

You can follow the instruction below:

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss->paste below code at the bottom of the file:
@media (max-width: 769px) {
    .template-product .wrapper {
        padding: 0 !important;
    }
    .template-product .product-single__thumbnails {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.