Reduce white space between images on photo slider dawn theme

[Verterra]

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

[AnneLuo · 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!

[Verterra]

Thank you, this worked well for me! 

[Rahul_dhiman]

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

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

[Verterra]

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

[Rahul_dhiman]

Okay, Thanks