Center items in featured Collection

Store Design
,

Topic summary

A user seeks to center product items in a featured collection on their Shopify store. The initial issue shows products appearing left-aligned with uneven spacing (screenshot provided).

Solutions offered:

  • First approach: Add CSS to center card content and pricing text in base.css
  • Clarification: User specifies they want to remove right-side margin/padding from images rather than center text
  • Second approach: Apply flexbox CSS to collection containers with justify-content: center to center the grid layout
  • Third approach: Adjust grid gap spacing and center card information elements using targeted CSS rules

All solutions involve editing the theme’s base.css file with custom CSS code. The discussion remains open as the user hasn’t confirmed which solution resolved their specific spacing issue.

Summarized with AI on October 26. AI used: claude-sonnet-4-5-20250929.
1

Hello, I would like to center items in featured Collection. It seems to be set to the left a little and would love to fix this asap. See screenshot for reference.

Screenshot 2025-08-01 at 10.07.50
Screenshot 2025-08-01 at 10.07.501920×1019 236 KB

Thank you so much!
Ella.

2

Hello @ellacoker ,

Edit base.css under assets, scroll down to bottom and add this css.

.card__content, .card__content .price {
    text-align: center !important;
}

Regards
Guleria

3

Hi, instead of centering the price I would like the actual image margin/padding on the right to be taken away

4

Hi @ellacoker ,
Go to online store → themes
actions → edit code → assets → base.css or theme.css
paste this css at the end

.featured-collection,
.collection,
.collection-grid,
.collection__products {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;  /* optional: spacing between items */
  text-align: center;
}

save and refresh.
thanks
Manoj

5

Hello @ellacoker ,

Here are the steps to apply the necessary changes in your Shopify store:

  1. In your Shopify Admin, navigate to Online Store > Themes > Actions > Edit Code.
  2. Locate Asset > base.css and paste the following code at the bottom of the file:
.slider-mobile-gutter ul.grid{
   gap: 2rem !important;
}
.card-information,.card__information {
    text-align: center !important;
}

image
image1902×810 198 KB

Let me know if you need further assistance!