How Can I Get Full Width On Product Images On Mobile

5 0 1

My website is 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)

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, {

    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.

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.