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