Centering Shopify Collection Grids on Horizon Theme: A Community Guide to Responsive Design

Hey fellow store owners! Navigating the world of Shopify customization can feel like a delicate dance, especially when you're trying to make your store look pixel-perfect across all devices. We recently saw a fantastic discussion unfold in the Shopify Community that really hit home for anyone using the Horizon theme and wanting to fine-tune their collection grids. It's a classic scenario: you get a desktop view just right, only to find your mobile layout has gone a bit... sideways.

Our friend @AdamT06 kicked off the thread with a common challenge. He was trying to center his collection grid on the homepage and found some custom CSS to add to his base.css file. The code he initially tried looked something like this:

.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%;
}

On a PC, it seemed to do the trick. But then came the mobile test. As Adam shared, his phone view went from this (before):

To this (after):

Ouch! The collection grid was duplicating and squishing the product cards, making them tiny and unusable. Definitely not the sleek, centered look he was going for.

Considering Built-in Theme Features First

This is where the community really shines. Before diving straight into code, a helpful member, @Maximus3, raised a crucial point: "I don’t understand what you’re trying to accomplish. The featured collection in Horizon is pretty customizable on its own within the settings." And honestly, this is often the first place we should look! Maximus3 pointed out that the Horizon theme is already quite smart about responsiveness. For example, it limits the number of products shown on mobile to two max to ensure they're visible, even if you set an odd number for desktop. This often means a 4-product desktop layout naturally becomes a 2-product mobile layout, which works out great.

Maximus3 also suggested that if you're trying to center something very specific, like a collection with only a single product, you might be better off using a 'Custom Section' in the theme editor. This lets you add whatever product you want, set its size, and center it without having to fight the theme's default responsive behavior with a bunch of overriding CSS. It's a fantastic reminder that sometimes, the simplest solution is found right within Shopify's built-in tools, rather than complex code.

The Responsive CSS Fix (When You Need It)

However, sometimes custom CSS is truly what you need to achieve a very specific design. And for Adam's specific problem, where he did want a custom 3-column desktop layout that was centered, @topnewyork stepped in with the perfect diagnosis and solution. Topnewyork quickly identified that Adam's original code was forcing a 3-column layout (33.33%) across all screen sizes. This is the culprit for the squished mobile view – it was trying to cram three products into a space designed for two, or even one, product width.

The fix? Incorporating a media query. This allows your CSS to apply different styles based on screen size. Topnewyork's updated code ensures that on larger screens (min-width: 750px), you get your desired 3-column centered grid. But for smaller screens, it gracefully defaults to a 2-column layout, preventing any distortion. Here's the updated code you'd want to use:

.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%;
  }
}

How to Implement the Responsive Centering Fix:

1. Go to your Shopify Admin.
2. Navigate to Online Store > Themes.
3. Find your Horizon theme, click Actions > Edit code.
4. In the Assets folder, locate base.css (or theme.css, sections-main-product.css depending on your theme structure, but base.css is a common place for global styles).
5. Important: Before making any changes, it's always a good idea to duplicate your theme or back up the file you're editing.
6. Find and replace the original custom CSS code you added with the updated code provided by topnewyork above.
7. Save your changes.
8. Test your store on various devices (desktop, tablet, mobile) to ensure everything looks as expected.

This discussion is a fantastic example of the balance we often need to strike in Shopify customization. Sometimes, the theme's built-in settings are your best friend, offering powerful, responsive solutions without a single line of code. Other times, when you have a very specific design in mind, a well-crafted CSS snippet – especially one that uses media queries – can get you exactly where you need to be. The key takeaway? Always, always consider responsiveness, and don't be afraid to lean on the incredible collective wisdom of the Shopify Community. They're often troubleshooting the exact same issues you are!