Hi! I am trying to change the size of the cards in the collection list. They are too big and would like to make them smaller. Any tips on how?
This is my site for reference: https://growinggracecreations.com/
Topic summary
A user seeks to reduce the size of collection list cards in the Sense theme, finding them too large.
Solution provided:
- Navigate to Online Store → Themes → Edit Code in Shopify admin
- Locate and open the base.css file
- Find the
@media screen and (min-width: 990px)section - Adjust the
max-widthproperty by modifying the--grid-desktop-horizontal-spacingvariable
Example modification:
Replace the existing value with 117px (e.g., max-width: calc(25% - 117px * 3 / 4)) to make cards smaller. The responder included before/after screenshots demonstrating the visual difference, showing noticeably reduced card sizes after applying the CSS changes.
Users can adjust the pixel value according to their specific requirements for card dimensions.
Hi @growinggracecre ,
To minimize the cards in your collection list, you can do it in the following way
- In the admin, go to Online store → Themes → Edit code
- then search for base.css
- Next find @media screen and (min-width: 990px) then adjust max-width according to your requirements
eg: max-width: calc(25% - 117px* 3 / 4); I replaced var(–grid-desktop-horizontal-spacing) with 117px, increasing the size of the cards becomes smaller.
Result:
Before
After
Hope it helps @growinggracecre