A user implemented a collection slider on their Shopify store using a tutorial from mrdigitals.com. The slider functions correctly, but when configured to display 2-3 columns on mobile devices, the spacing between columns appears excessively large.
Problem Details:
Current Status:
Hi everyone!
I used this code to create a collection slider: https://mrdigitals.com/how-to-add-collections-slider-in-shopify-without-app-2025/
It worked really great! But when I set it to 2 or 3 columns on mobile, the gaps between the columns are really, really big.
I am no developer, so I am kind of lost on how to make the gaps smaller.
I tried changing the section with “margin” but then the gaps to the left and right side also got smaller.
Any ideas for work arounds?
I already tried that too
// Calculate the effective slide width (as per our CSS calc)
var effectiveSlideWidth = (sliderWidth - ((visibleSlides - 1) * gap)) / visibleSlides;
I changed the gap from 15px to 5px to see if it changes anything, but it stayed the same
it think it is somewhere here, but I can’t make it work:
#collections-slider-{{ section.id }} .slider-track {
display: flex;
gap: 15px;
transition: transform 0.5s ease-in-out;
will-change: transform;
}
/* Desktop: Slide width based on visible_slides */
#collections-slider-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_slides | minus: 1 }} * 15px)) / {{ section.settings.visible_slides }});
box-sizing: border-box;
padding: 20px;
text-align: {{ section.settings.collection_title_alignment }};
{% if section.settings.card_shadow %}
box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
{% endif %}
}
/* Mobile: Use visible_mobile setting */
@media (max-width: 767px) {
#collections-slider-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_mobile | minus: 1 }} * 15px)) / {{ section.settings.visible_mobile }});
}
Thats close
gap: 15px;
flex: 0 0 calc((100% - ({{ section.settings.visible_mobile | minus: 1 }} * 15px)) / {{ section.settings.visible_mobile }});
The 15px is used in 2 instances, as a gap as well as within the width window.
Thereby when the slides become tighter on mobile the spacing is doubled.
Attempt to reduce either of them to a smaller number just to do it on mobile:
@media (max-width: 767px) {
#collections-slider-{{ section.id }} .slider-track {
gap: 6px !important;
}
#collections-slider-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_mobile | minus: 1 }} * 6px)) / {{ section.settings.visible_mobile }});
padding: 10px;
}
}
That will allow you to have a far closer layout without losing the entire slider or compromising desktop.
Provided it still appears lopsided, please provide me with a preview URL or a screen shot and I have done the same to several stores using that tutorial and would be happy to show you where to make a minor adjustment to your theme.
This code assumes that gap is 15px and it does not allow the slides neither shrink nor grow.
So, change this 15px here to match the gap you’re setting
flex: 0 0 calc((100% - ({{ section.settings.visible_slides | minus: 1 }} * 15px)) / {{ section.settings.visible_slides }});
It’s a good case to use CSS variables, like this:
--slide-gap: 5px;
. . .
gap: var(--slide-gap);
. . .
flex: 0 0 calc((100% - ({{ section.settings.visible_mobile | minus: 1 }} * var(--slide-gap))) / {{ section.settings.visible_mobile }});
That’s what modern themes do. You change the value in one place and it gets updated in other place automatically.
Tip: use </> button when pasting code – this will prevent code from being misunderstood by forum engine.
I already tried that. I did not change the gap width. Only the distances to the left and right of the screen, but not the gaps between images
Like this (it’s just a part of code so you can find where to change)
#collections-slider-{{ section.id }} .slider-track {
--slide-gap: 5px; /* <-- here */
display: flex;
gap: var(--slide-gap); /* <-- here */
transition: transform 0.5s ease-in-out;
will-change: transform;
}
/* Desktop: Slide width based on visible_slides */
#collections-slider-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_slides | minus: 1 }} * var(--slide-gap))) / {{ section.settings.visible_slides }}); /* <-- here */
box-sizing: border-box;
padding: 20px;
text-align: {{ section.settings.collection_title_alignment }};
{% if section.settings.card_shadow %}
box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
{% endif %}
}
/* Mobile: Use visible_mobile setting */
@media (max-width: 767px) {
#collections-slider-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_mobile | minus: 1 }} * var(--slide-gap))) / {{ section.settings.visible_mobile }}); /* <-- here */
}
}
Hey @a.bruns1
Thanks for posting this to the Shopify Community.
Problem Solution:
This usually happens when the spacing or grid settings for the collection slider on mobile have larger default column gaps. You can fix it by adjusting the mobile layout spacing — try reducing the grid gap or padding in your slider section settings. This will make the space between columns smaller while keeping the side margins balanced.
Waiting to hear back from you. If this was helpful, don’t forget to like it and mark it as a solution.
Thanks,
Hi Tim,
Thank you for explaining.
I did as you wrote, sadly the gap stays the same, even with the
--slide-gap: 0px;
Do I also need to change something in the CSS section further down?
var gap = 15; // Must match the CSS gap
If it says “Must match” then it probably should 
It would be much easier if you can share a preview link to the page where slider is.
Hi Tim,
I tried that too 
sorry, just can’t make it work.
Here is my preview link:
On desktop it looks really nice, but on mobile the gaps are still insanely big 
This is your preview link – https://joyandsunshine.de/?preview_theme_id=188833825093
On top of the gap, there is also a 20px padding on each slide, so even with zero gap it makes it 40px between images.
You can make padding zero and then play with gap, or you can
/* Desktop: Slide width based on visible_slides */
#collections-slider-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_slides | minus: 1 }} * 15px)) / {{ section.settings.visible_slides }});
box-sizing: border-box;
padding: 20px; /* <-- this */
text-align: {{ section.settings.collection_title_alignment }};
{% if section.settings.card_shadow %}
box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
{% endif %}
}
/* Mobile: Use visible_mobile setting */
@media (max-width: 767px) {
#collections-slider-{{ section.id }} .slide {
flex: 0 0 calc((100% - ({{ section.settings.visible_mobile | minus: 1 }} * 15px)) / {{ section.settings.visible_mobile }});
padding: 5px; /* <-- can add this */
}
}
And unfortunately, you can’t mix and match CSS and JS like this:
var gap = var(--slide-gap);
You can instead do like this:
{% assign slide_gap = 15 %}
<style>
. . .
--slide-gap: {{ slide_gap }}px;
. . .
</style>
<script>
. . .
var gap = {{ slide_gap }};
. . .
</script>
However, I wonder why you need this code when the theme has “Collection list” section?
Hi Tim,
you did it! Thank you!
I needed the new section as I want to have round images on a few pages and my theme can only do square or portrait.
I’d frankly rather use the existing section and add some custom CSS to round the images.
Also, if you continue with this section, I’d restore the <script> portion of the code – in preview theme I see it generating an error and not working.
Sorry I don’t know what you mean with restore
The other nice thing is, that it can have 3 images on mobile version. My collection list can only have two columns.