DAWN THEME: Mobile view is cutting off product images

Store Design
, , ,
1

donda_lopez_0-1676058337847.png
donda_lopez_0-1676058337847.png396×462 46.4 KB

Everything is normal on my desktop view, but on the mobile view the first image is cut off when there is 2 products in the carousel. What is the code to fix this?

Thanks!

2

You may use the impulse theme if the dawn theme isn’t functioning properly, however it costs money.

3

Hi @Donda_lopez,

You can try this code by following these steps:

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

Step 2: Search file component-slider.css.

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

@media(max-width:767px){
slider-component.slider-mobile-gutter ul.product__media-list li:first-child{
margin-left:calc(100vw + 1rem) !important
}
}

PageFlyVictor_0-1676078534810.png
PageFlyVictor_0-1676078534810.png728×1314 84.4 KB

Hope my solution works perfectly for you!

Best regards,

Victor | PageFly

4

Thank you! Works amazing.

5

you are welcome. I’m glad when I can help you :heart_eyes:

6

Hello,I’m facing same problem and try to use your code however code doesn’t work for mw. I’m using Dawn theme ver 9.0.0 and there is no “slider-component.slider-mobile-gutter ul.product__media-list li:first-child” ? can you update the code?