How do I center this single product in featured collections block? Baseline theme

Store Design
, ,
1

Hi, I have a single product in a featured collection (discovery set) — How do I make it align center on desktop and tablet?

Details: On desktop and tablet, it aligns left. On mobile it looks good. I want it to be aligned in the center (while staying the same size) on desktop and tablet. The other featured collections look good and I don’t want them to be affected.

Thanks in advance!

IMG_3605
IMG_36051920×1334 57.6 KB

4

Hi @Db33,

Please send the website link, I will check it for you

5

thank you!

6

Hi @Db33,

Please go to Customize > Sections > Featured collection > Custom CSS and add code:

@media (min-width: 1024px) {
.lg\:col-span-6 {
    grid-column: 4 / span 6;
}
}
7

Hi @Db33

For the Baseline theme, the featured collection section is designed to align products in a grid by default. When there’s only one product, it tends to “stick” to the left on desktop and tablet. To fix this without affecting your other collections, you’ll need to adjust the CSS targeting just that block.

A simple way is to add a custom CSS rule that applies only when there’s a single product inside the featured collection. This way, the product will stay centered on larger screens while your other multi-product collections remain untouched.

If you’re not familiar with CSS tweaks, I can help you apply the exact code and ensure it’s scoped properly so nothing else on your store layout breaks. Feel free to reply here or share your email, and I’ll walk you through the fix.

8

Worked perfectly! Thank you very much.

9

Hi @Db33,

It’s my pleasure :blush: