Remove paddings around main product image

PetNShop
Tourist
5 0 2

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

Replies 2 (2)
dmwwebartisan
Shopify Partner
12265 2544 3677

@PetNShop 

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

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Dan-From-Ryviu
Shopify Partner
5566 1019 1044

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;
}
}

- Helpful? Like and Accept a solution. - Donate: Buy coffee - or Paypal me ❤️
- Ryviu - Product Reviews app, collect consumer photo reviews, import reviews from AliExpress, Amazon, Etsy, Shoppe and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 3 months of Shopify for $1/month. Sign up now