Does anyone know how I could make my featured collection section look like this example image I provided? Where everything is connected and separated by thin grey lines?
Website: Wholesome Boy
Example of what I want:
Topic summary
A user seeks to customize their featured collection section in Shopify’s Dawn 9.0.0 theme to create a connected grid layout with thin grey dividing lines between product cards.
Proposed Solution:
- Another user provided CSS code to be added to the
base.cssfile - The code removes column gaps and adds 2px solid grey borders (#c9c9c9) to card elements
Follow-up Question:
- The original poster asks if the solution can also be applied to product title cards
Status: The discussion remains open with the initial CSS solution provided but awaiting confirmation on whether it addresses the full requirement, including title card styling.
@WholesomeBoy add below css into base.css file
.grid {
column-gap: 0px !important;
}
.card .card__inner .card__media {
border: solid 2px #cdc9c9 !important;
}
Anyway to do it around the product title cards too? Thanks!