Changing collection card gap sizes

Store Design
, , , ,
1

Hi,

I’m trying to make the gap between my collection cards smaller but can’t find a solution. The collections scroll and will be similar to the buttons on Instagram for stories or highlights.

Do you know how to make them closer together? I have custom CSS already running on them to make them the shape and size.

I’ve looked around on the community but I can’t seem to find an answer for this.

Screenshot below is how it would look on mobile, ignore the grey border.

Screenshot 2024-07-25 170854.png
Screenshot 2024-07-25 170854.png402×207 27.2 KB

Thanks!

2

Hello @SilentWizard .
Our team is ready to help you.
Please share your website address and access password (if necessary) so that we can check and assist you.

3

Hi, the current address is sent to you

4
  • Here is the solution for you @SilentWizard
  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css or theme.css file.
  • Then add the following code at the end of the file and press ‘Save’ to save it.
@media only screen and (max-width: 600px) {
.collection-list__item {
 min-width: 28% !important;
}
.collection-list__item .card__inner {
     width: 60% !important;
}
}
  • Here is the result you will achieve:

BSSTekLabs_0-1721925456022.png
BSSTekLabs_0-1721925456022.png368×815 90.1 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
5

That’s so much better, thank you! Is there a way to make the extra icons ‘peek’ from the right to indicate there are more available?

6

If you want like this.

change 28% to 27%

@media only screen and (max-width: 600px) {
.collection-list__item {
 min-width: 27% !important;
}
.collection-list__item .card__inner {
     width: 60% !important;
}
}
7

BSSTekLabs_0-1721926040131.png
BSSTekLabs_0-1721926040131.png359×803 85.3 KB

8

Thank you for all your work!

9

Glad to help you. Have a good day.