How can I make my product image full width on mobile only?

[PetNShop]

Hello community!

I am currently building my product page, and I’m trying to make the main product image have no padding/ be full width on mobile only.

Look at the images below for a visual presentation of what I’m looking to do.

Store = https://petnshop.ca/products/original-calming-dog-bed

have a great day!

[Mike-Consentik]

Hi @PetNShop 

This is Mike from Omega

You can try my solution:

1. Open Theme -> Edit Code

2. Open base.css or theme.css in Assets folder and paste code below to the bottom of file

@media screen and (max-width: 749px) {
.grid--peek.slider li.grid__item:first-of-type {
    margin-left: 0; 
}
.product__media-list li.product__media-item {
    width: 100%;
}
}

Hope my answer will help you.

Mike from Omega

[zlati84]

sorry but  this doesnt work

[JCL28]

THANK YOU

[JCL28]

This worked for the first image but not the subsequent images where you see padding on the left and a small sliver of the prior image. How do I fix this? Thanks!

[Mike-Consentik]

hi @JCL28 , @zlati84 
Could you leave your store URL or send me a private message if you do not want to public it, then I can check it for you?