Reduce white space between images on photo slider dawn theme

Solved

Reduce white space between images on photo slider dawn theme

Verterra
Explorer
62 1 9

Hi, 

Does anyone know how to reduce the space between the photos on the image slider? I want the second photo to show on the page too so that the user knows they can swipe right for more photos. I've included the photo of my website below, and an example photo of what I want it to look like. Thanks!

 

 

My store URL is: https://verterra.sg/password, password is VerterraTest123

 

Verterra_1-1720589396532.png

 

Verterra_0-1720589358044.png

 

Accepted Solution (1)

AnneLuo
Shopify Partner
775 149 164

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media screen and (max-width: 749px) {
    .product__media-list .product__media-item {
        width: calc(100% - 4rem - var(--grid-mobile-horizontal-spacing)) !important;
    }
}
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 5 (5)

AnneLuo
Shopify Partner
775 149 164

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
@media screen and (max-width: 749px) {
    .product__media-list .product__media-item {
        width: calc(100% - 4rem - var(--grid-mobile-horizontal-spacing)) !important;
    }
}
</style>


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

Verterra
Explorer
62 1 9

Thank you, this worked well for me! 

Rahul_dhiman
Shopify Partner
248 45 46

Hello @Verterra 
Go to online store ---------> themes --------------> actions ------> edit code------->assets-----> component-slider.css
and this code at the end of the file.

 

 

@media screen and (max-width: 749px) {
    .slider.slider--mobile {      
        padding: 20px !important;
    }
}

and the result will be

2.png

 

If this was helpful, hit the like button and mark the job as completed.
Thanks

 

 

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here
Verterra
Explorer
62 1 9

Thank you! I went with the other solution as that worked for me. 

Rahul_dhiman
Shopify Partner
248 45 46

Okay, Thanks

Was I helpful?

Buy me a coffee



Want to modify or custom changes or bug fix on store . Or Need help with your store? Or -Want Complete Storefront
Email me -rahul@prowebcoder.com - Skype: live:dhiman.639
Checkout Some Free Sections Here