Change spacing between columns

Store Feedback
1

Hello,

I would like to change the spacing in between the columns as shown in the screenshot. In fact I would like to remove one of the products but if I do, the remaining two columns will be a lot further apart which I do not like.

I tried fiddling with several settings (grid etc) but nothing helped.

My store is: https://www.daocplatinum.com/

Thank you!!

image
image926×549 133 KB

2

Hey @Ombry

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above </ body> tag
<style>
@media screen and (min-width: 768px) {
.card.card--card.card--media.color-background-1.gradient {
    width: 100% !important;
}
}
</style>

RESULT:

image
image958×595 174 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

3

You added this code to Custom CSS of your section so it caused those spacing

.collection .card {
  width: 80%;
  margin: auto;
}

Please remove width: 80%; from that code to solve

Screenshot 2025-12-09 at 15.56.41
Screenshot 2025-12-09 at 15.56.411920×1421 546 KB

4

thx for your reply.

I added that code because otherwise the columns were too big.

Could you please check now? I removed one of the products. I want to show two products only. But now the spacing is huge. I would like the columns to be a lot closer. If I remove that code you mentioned, they will be, but they will also be extra huge. I would like the columns to be as small as they are now.

Please help. Thanks!!

5

Hey @Ombry,

In order to fix the issue with the spacing for the product cards, you need to follow these steps.

Go to Shopify Admin >> Online Store >> Edit Code >> base.css

In the end of base.css file paste the following code that shared below.

.card.card--card.card--media.color-background-1.gradient {
  width: 100% !important;
}

Results:

image
image1907×952 279 KB

6

please see my reply above. If I add that code, the two colums will be huge as shown in your screenshot. I would like them to be as small as they are now, but also as close to each other as in your picture. How can I do that? Thanks!!

7

I’d suggest this code. Should go into “Custom CSS” setting of this section:

slider-component {
  --grid-desktop-horizontal-spacing: 5px; 
  --grid-mobile-horizontal-spacing: 5px;
  --page-width:  600px; /* max-width of entire section */
}

slider-component li {
  max-width: 300px !important; /* may not be needed */
}

And undo your code mentioned above.

8

Hi, @Ombry
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 before the </head> tag

<style>
@media screen and (min-width: 990px) {
.slider-mobile-gutter.page-width-desktop {
    max-width: 50% !important;
    width: 50%;
}
}
.slider-mobile-gutter.page-width-desktop ul{
    width: 60%;
    justify-content: center;
    margin: 0 auto;
    column-gap: 0 !important;
}

</style>

Result:

image
image978×981 196 KB

Hope this helps! If yes then Please don’t forget hit Like and Mark it as solution!
If you will unable to implement the same then I’m happy to do this for you, let me know.

9

this worked perfectly. THANK YOU!!!