Solved

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

DRAWandCARE
Pathfinder
107 0 13

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.jpgphoto_2023-10-17_08-39-46.jpg

Accepted Solution (1)

PageFly-Theodor
Navigator
360 51 55

This is an 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

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.

View solution in original post

Replies 6 (6)

Nafiul
Shopify Partner
39 4 7

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



I hope this will help. 

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

Thank you
Nafiul Hasan



- Was my reply helpful? Please Click Like
- Question answered? Mark it as an Accepted Solution.
Your Coffee Tip fuels our coding support magic.BUY ME A COFFEE
Looking for an experienced Shopify developer? Visit PointerFlow.com
DRAWandCARE
Pathfinder
107 0 13

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

PageFly-Theodor
Navigator
360 51 55

This is an 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

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.

DRAWandCARE
Pathfinder
107 0 13

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

AryavK
Trailblazer
219 9 29

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

Will be appreciated

faith&you
DRAWandCARE
Pathfinder
107 0 13

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! 🤗💗