Center collection on home page - Horizon

Store Design
, , ,
1

Hello,
I recently tried to center my collection grid on my home page by adding this code that i got into my base.css:

.resource-list–grid {
display: flex !important;
flex-wrap: wrap;
justify-content: center !important;
gap: 24px;
}

.resource-list–grid .resource-list__item {
width: calc(33.33% - 24px);
}

.resource-list–grid .resource-list__item:only-child {
width: 33%;
}

.resource-list–grid .resource-list__item:nth-last-child(2):first-child,
.resource-list–grid .resource-list__item:nth-last-child(2):first-child + .resource-list__item {
width: 33%;
}

This code seems to work on Pc view but on phone view it dosent work.
Here is what it looks like on the phone veiw:

Before:

image
image690×387 48.7 KB

After:

image
image690×387 48.9 KB

It seems like it duplicates and makes the collection grid smaller.
Does anyone know how to fix it?

2

I don’t understand what you’re trying to accomplish.
The featured collection in Horizon is pretty customizable on its own within the settings.

Screenshot 2026-05-24 075527
Screenshot 2026-05-24 075527288×664 10.2 KB

The only limitation is that if you set an odd number of products. Why? Because on desktop that’s fine, but on mobile 3 becomes too small to see, that’s why Horizon limits this to 2 max. This implies that the best scenario is showing an even number both on desktop and on mobile. This actually works out very well. 4 on desktop, 2 on mobile.

In your earlier post, you wanted a collection with a single product to be centered. You can add a Custom Section, and add whatever product you want, set the size and center.

It’s really not worth the effort to try and fight it with tons of overriding css. Besides, your code doesn’t factor any mobile viewport assignments.

3

Hey @AdamT06,

Can you share your store url so that I can take a look and provide you the solution accordingly?

4

Hi @AdamT06 ,

The issue is happening because the custom CSS code you added forces a 3-column layout (33.33%) on all screen sizes, which breaks the responsive grid and squishes the product cards on mobile devices.

Please try replacing your previous code in base.css with this updated version. It includes a media query to keep the 3-column centered grid on desktop screens, while allowing the mobile layout to adjust properly without any distortion.

.resource-list--grid {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  gap: 16px;
}

.resource-list--grid .resource-list__item {
  width: calc(50% - 16px); 
}

@media screen and (min-width: 750px) {
  .resource-list--grid {
    gap: 24px;
  }
  
  .resource-list--grid .resource-list__item {
    width: calc(33.33% - 24px); 
  }
  
  .resource-list--grid .resource-list__item:only-child {
    width: 33%;
  }
  
  .resource-list--grid .resource-list__item:nth-last-child(2):first-child,
  .resource-list--grid .resource-list__item:nth-last-child(2):first-child + .resource-list__item {
    width: 33%;
  }
}

If this works for you, please accept it as the solution.