How Can I Get Full Width On Product Images On Mobile

parthpatel05
Tourist
5 0 1

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:

Screenshot 2024-02-14 at 8.42.13 AM.png

 

I want it to look like:

Screenshot 2024-02-14 at 8.43.10 AM.png

 

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.

 

 

 

 

Replies 2 (2)

PageFly-Henry
Astronaut
976 278 223

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

parthpatel05
Tourist
5 0 1

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. 

 

IMG_7618.jpg