I am using the Dawn theme and I want to increase the vertical spacing between the top and bottom row and decrease the background on the bottom of each column.
How do I do that?
Thx in advance!
Topic summary
Goal: Tweak spacing in the Shopify Dawn theme’s multicolumn section—more vertical space between rows, less bottom padding/background in each column, and remove a one-sided edge padding.
Context: OP shared custom CSS (image wrapper margin unset, multicolumn top padding reduced to 0, hover zoom effect) and screenshots. The storefront URL was provided. Images and code are central to understanding the issue.
Proposed fix: A helper suggested CSS:
- .multicolumn-card__info { padding: 0.5rem 2.5rem !important; }
- .multicolumn-card__info .link { margin-top: 0 !important; }
- .multicolumn-list { row-gap: 12px !important; }
Row-gap controls vertical spacing between rows; padding adjusts inner spacing of text areas.
Outcome: This resolved the vertical spacing and bottom text spacing concerns.
Remaining issue: A persistent, asymmetric padding/margin on one side of the columns (OP observed left, later right). The helper could not reproduce and suggested it may be a browser-specific display issue, sharing a screenshot that appeared correct.
Status: Partially resolved. The odd side padding remains unconfirmed and may depend on the user’s browser. No final resolution yet.
There is also a weird padding on the left edge only of the columns that I would like to remove?
The only code I added to the section-multicolumn.css to make the pictures fill the full column is this:
.multicolumn-card__image-wrapper{
margin: unset;
}
I also edited this part of the section-multicolumn.css code to remove the padding on the top (I went from 2.5rem to 0rem):
.multicolumn-card-spacing {
padding-top: 0rem;
I also added this code to the base.css to make the pictures of the columns zoom when hovering over them:
.multicolumn-card__image-wrapper .media{
overflow: hidden;
margin: 0 auto;
}
.multicolumn-card__image-wrapper .media img {
width: 100%;
transition: 0.5s all ease-in-out;
}
.multicolumn-card__image-wrapper .media:hover img {
transform: scale(1.05);
}
Please use this code and check again
.multicolumn-card__info {
padding: 0.5rem 2.5rem !important;
}
.multicolumn-card__info .link {
margin-top: 0 !important;
}
.multicolumn-list {
row-gap: 12px !important;
}
That fixed the vertical spacing and bottom text spacing issues, but the weird margin/padding on the right side of all of the columns is still there?
