Hello, I am trying to close the spacing between the heading and icon in the multi-column. How would I go about doing this? Here is the link to the page. Thanks in advance.
Topic summary
A user seeks to reduce spacing between headings and icons in Dawn theme’s multi-column section.
Solutions Provided:
Two contributors offered CSS code snippets to add to the theme’s base.css file:
-
SetuBridge_1’s approach: Targets
.multicolumn-card__infowithpadding-top: 0 !important -
dmwwebartisan’s approach: Provides responsive CSS with media queries for both mobile (max-width: 749px) and desktop (min-width: 750px), adjusting both top and bottom padding
Outstanding Issue:
One user reports the solution works with default backgrounds but fails when selecting “secondary background” or “Show as column background” options. They’re seeking guidance on modifying the code to accommodate these background settings.
Status: Partially resolved—basic spacing issue addressed, but compatibility with alternative background options remains unresolved.
1 Like
Hello @tootles23
Follow the steps:
Online store → Actions → Edit code → Assets → base.css and paste below the code at the last of the file
.background-none .multicolumn-card__image-wrapper+.multicolumn-card__info {
padding-top: 0 !important;
}
Output:
2 Likes
Please Add the following CSS code to your assets
@media screen and (max-width: 749px){
.background-none .multicolumn-list .multicolumn-card__info, .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
padding-top: 0px !important;
padding-bottom: 1.5rem !important;
}
}
@media screen and (min-width: 750px){
.background-none .multicolumn-list .multicolumn-card__info, .background-none .multicolumn-list:not(.slider) .center .multicolumn-card__info {
padding-top: 0px !important;
padding-bottom: 1.5rem !important;
}
}
Thanks!
1 Like
Hello! This worked for me, but not when I choose secondary background “Show as column background”. Do you know how I can edit the code so it also works for my case?