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

[DRAWandCARE]

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!

[Nafiul]

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;
}
}

I hope this will help. 

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

Thank you
Nafiul Hasan

[DRAWandCARE]

Thank you for your reply, but, unfortunately, it didn't work for me for some reason 😞

[PageFly-Theodor · Accepted solution]

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

[DRAWandCARE]

Thank you so much for your help! It worked perfectly! 💪

[AryavK]

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

Will be appreciated

[DRAWandCARE]

Hello! Please check out my last reply about it here: https://community.shopify.com/c/shopify-design/add-arrows-to-swipe-between-product-images-next-previ... 

Hope it will help you! 🤗💗