Change the left margin of the photo carousel on the mobile version of the product page (Dawn 11.0.0)

Store Design
, ,
1

Hello everyone,

I’m currently using the Dawn 11.0.0 theme for my website, and I need assistance with a specific issue regarding the left margin of the photo carousel on the mobile version of the product page. The problem I’m encountering is that the left margin is pushing all the photos to the side, causing an undesirable display (see the screenshots below). Unfortunately, the solutions provided in similar discussions haven’t resolved this issue, and it’s specific to the mobile version (everything is ok with the desktop view).

Website link: https://www.drawandcare.com/products/mini-custom-watercolor-cat-portrait-watercolor-pet-portrait

I would greatly appreciate any help in addressing this matter!

photo_2023-10-17_08-39-42.jpg
photo_2023-10-17_08-39-42.jpg708×1280 101 KB

photo_2023-10-17_08-39-46.jpg
photo_2023-10-17_08-39-46.jpg720×1280 73.5 KB

2

Hey @DRAWandCARE

please apply this code at the bottom of your theme.css file.

@media screen and (max-width: 749px){
.slider.slider--mobile .grid--peek.slider .grid__item:first-of-type {
    margin-left: inherit !important;
}
}

Nafiul_0-1697522627073.png
Nafiul_0-1697522627073.png439×501 260 KB

I hope this will help.

Don’t forget to hit the like button of my comment.

Thank you
Nafiul Hasan

3

Thank you for your reply, but, unfortunately, it didn’t work for me for some reason :disappointed_face:

4

Hi @DRAWandCARE @
This is Theodore from PageFly - Shopify Page Builder App.
For solving the problem about the Change The Left Margin Of The Photo Carousel On The Mobile Version Of The Product Page, let’s try this solution:

Online Store ->Theme ->Edit code
Assets ->Base.css

@media screen and (max-width: 749px)
{
.grid--peek.slider .grid__item:first-of-type {
    margin-left: unset !important;
}
}

I’ll be so happy if my suggestion can help to solve your problem. If you have any further questions, please feel free to tell me.
Best regards,
Theodore | PageFly

5

Thank you so much for your help! It worked perfectly! :flexed_biceps:

6

@DRAWandCARE can you pls share with me how did you get the carousel.

Will be appreciated

7

Hello! Please check out my last reply about it here: https://community.shopify.com/post/2351376

Hope it will help you! :hugs: :growing_heart: