Goal: Make collection list boxes smaller in Shopify’s Crave theme, ideally with a size control (slider) while keeping a chosen number of boxes per row. A photoshopped reference image was provided; store preview URL and password were shared.
Proposed fix: A CSS snippet (added to base.css) targeting desktop (.grid–4-col-desktop .grid__item) set items to 20% width at ≥990px, effectively creating five columns. CSS (Cascading Style Sheets) controls visual styling.
Result: The change produced five boxes per row but did not meet the request for smaller boxes at a fixed count per row. The original poster still needs smaller cards with controllable sizing.
Alternative request: The poster would also accept a carousel (scrollable row with arrows) that supports many collections, though the preference remains smaller boxes.
Other input: One reply suggested switching themes (non-specific). Another “it helped” comment appears generic. The attached image is important to understand the desired sizing.
Status: No confirmed solution. Key open needs are either precise CSS adjustments to reduce card size without changing the per-row count, or guidance to implement a collection carousel with arrow navigation.
Hello, I need help to make my collection list boxes smaller. I provided a photoshopped image I made for reference of what I am talking about. I want to keep however many I boxes in a row I choose with a desired custom size if possible. A slider to adjust the size of the boxes would be nice. My stores URL is petsandmore-2277.myshopify.com
and the password is affuas. Thank you!
If you don’t like the layout of a specific theme or it doesn’t fit with your brand, you should look elsewhere. www homedepot com survey
I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.
Please add this css in your bottom of the base.css file:
@media screen and (min-width: 990px) {
.grid–4-col-desktop .grid__item { width: calc(20% - var(–grid-desktop-horizontal-spacing) * 4 / 5) !important; max-width: calc(20% - var(–grid-desktop-horizontal-spacing) * 4 / 5) !important;}
}
Regards,
San
Thank you for your reply! Unfortunately that code didn’t seem to work and instead just made it so there were 5 boxes in a row instead of just making them smaller. Matter of fact, if I could just get a code that allowed me to put an endless amount of collections and had an arrow to go through them that would work as well. But preferably smaller boxes.
It helped me on a current project, thank you!
