Remove paddings around main product image

Store Design
, , , , , , ,
1

Greetings, everyone!

I’m in the process of creating my product page, and I’m specifically working on adjusting the main product image to eliminate padding and make it full width, but only on mobile devices.

For a visual reference of what I’m aiming to achieve, please take a look at the images below.

This is the store: (https://petnshop.ca/products/original-calming-dog-bed)

Wishing you all a wonderful day!

IMG_1278.jpeg
IMG_1278.jpeg1179×2556 273 KB

2

@PetNShop

This is CSS code customization work Please hire a Shopify expert who can help you!

Thanks!

3

Hi @PetNShop

Please go to your Online store > Themes > Edit code > open base.css file, add this code at the bottom and save file

@media screen and (max-width: 749px) {
.slider-mobile-gutter .product__media-list .product__media-item {
    width: 100% !important;
    margin: 0 !important;
}
}