Solved

Adding Space Between Carousel Images (Dawn)

milkandcookies
Excursionist
414 0 49

Hi Shopify Community, can you please help me add space between my left images: 

milkandcookies_1-1707091512579.png

like this?:

milkandcookies_3-1707091643587.png

 

This is my current code for this (base.css):

 

@media (min-width: 700px) {
.product--thumbnail_slider {
position: relative;
}
.product--thumbnail_slider media-gallery {
display: flex;
flex-direction: row-reverse;
}
.product--thumbnail_slider .slider-mobile-gutter:not(.thumbnail-slider) {
width: calc(100% - 100px);
}
.product--thumbnail_slider .thumbnail-slider {
width: 100px;
padding-right: 10px;
}
.product--thumbnail_slider .slider-button {
display: none !important;
}
.product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up {
padding: 0;
display: block;
}
.product--thumbnail_slider .thumbnail-slider .thumbnail-list.slider--tablet-up .thumbnail-list__item.slider__slide {
width: 100%;
}
}

 

 

Accepted Solution (1)

PageFly-Richard
Shopify Partner
4079 912 1564

This is an accepted solution.

Hi @milkandcookies 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
ul#Slider-Thumbnails-template--16350539251893__main > li {
    margin: 10px 0;
}
</style>

PageFlyRichard_0-1707092616396.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | 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

Reply 1 (1)

PageFly-Richard
Shopify Partner
4079 912 1564

This is an accepted solution.

Hi @milkandcookies 

 

This is Richard from PageFly - Shopify Page Builder App

 

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<style>
ul#Slider-Thumbnails-template--16350539251893__main > li {
    margin: 10px 0;
}
</style>

PageFlyRichard_0-1707092616396.png

 

Hope this can help you solve the issue 

 

Best regards,

Richard | 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.