A user working with Shopify’s Spotlight theme encountered an issue where a collection containing only a single product automatically maximized the image to full width, unlike their other collections which display products in a 5-column grid.
Solution provided:
base.css file (found in Online store > Themes > Edit code > Assets).collection-list .collection-list__item:only-child and sets specific width and max-width properties to maintain consistent sizingOutcome:
The solution successfully resolved the issue, allowing the single-product collection to display at the same image size as products in multi-item collections.
Hi, I’m using Spotlight theme, and one of my collections only has a single product, but when i remove the other default blocks in the Collection to only the one, it automatically maximises the image size to full width.
All of my other collections are set to 5 columns so i want to make my collection with the single product the same image size as those.
Hi @Sakana
You can do that by adding this css code at the bottom of your base.css file in Online store > Themes > Edit code > Assets
.collection-list .collection-list__item:only-child {
width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
}
Amazing, it worked! thank you so much!!
You are very welcome
