How Can I Get Full Width On Product Images On Mobile

[parthpatel05]

My website is veinci.com. I am using the dawn theme.

How can I change the product images fit full width on the mobile view?

At the moment it looks like:

I want it to look like:

Essentially, I want the entire image to be fully shown and have no padding on the top, left, or right.

Any help would be greatly appreciated.

[PageFly-Henry]

Hi @parthpatel05 

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

@media (max-width: 767px){

.product__media-item.grid__item.slider__slide,

.product-media-container.media-type-image.media-fit-contain.global-media-settings.gradient.constrain-height {

    width: 100% !important;

}

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

[parthpatel05]

Thank you so much, that worked. The only issue is now I can not swipe between the images other than by pressing the buttons circled. Is there anyway to fix this so I can swipe between the pictures? Navigation buttons on the image would work perfectly, but swiping would also be fine. I have drawn the navigation buttons followed by a question mark for reference.

Also how can I remove the little white area above the image. I have also circled it for your convenience.

I appreciate your help.