Center Card

[Artez]

Hi, I am trying to center my cards, I have 7 cards, first row 4 and second 3.
Is it possible to center just the tree bellow? right now they are on the left on

my homepage service.

https://artez.design/

Warm regards

[suyash1]

@Artez please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

.multicolumn .multicolumn-list{justify-content: center;}

[Dan-From-Ryviu]

You can do that by adding this code to Custom CSS of that section.

.grid {
    justify-content: center;
}

[Mustafa_Ali]

hey @Artez dear follow these steps
Go to online store ----> themes ----> go to three Dots ----> edit code ---->find theme.liquid files ----> place the code ---->before the ----->
before the body ----->
if this code work please do not forget to like and mark it solution

[mt686]

Hey there!

Yes, absolutely! You can center just those 3 cards in the second row. Here’s how:

Solution: CSS for centering incomplete rows

1. Go to Shopify Admin → Online Store → Themes → Actions → Edit Code
2. Find assets/base.css
3. Add this CSS:

/* Center cards when there are fewer than 4 in a row */
.grid--4-col-desktop .grid__item:nth-child(4n+1):nth-last-child(-n+3),
.grid--4-col-desktop .grid__item:nth-child(4n+1):nth-last-child(-n+3) ~ .grid__item {
  margin: 0 auto;
}

/* Alternative approach - target the grid container */
.collection-list-wrapper .grid {
  justify-content: center;
}

.collection-list .grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

Simpler approach if you know the section class:

/* Replace 'your-section-class' with the actual section class */
.multicolumn .grid {
  justify-content: center;
}

This will keep your first row of 4 cards normal, but center the remaining 3 cards in the second row.

Alternative: With Easy Edits, you could just drag those cards to center them visually without any CSS - might be easier if you’re planning other layout changes!

Let me know if this centers them properly!