Multicolumn section styling in a Shopify theme: requester wants the card background changed from grey to black, text to white, and the entire button/card area to be clickable.
Proposed approach: a CSS snippet targeting a specific section ID sets the card background to black and the link text to white. It also attempts to make the anchor tag fill the card by setting display:block with 100% width/height and padding.
Progress: color changes worked and look correct based on shared screenshots. The “make the whole area clickable” change altered layout by enlarging the area rather than turning the entire card into a single clickable region.
Context: “Multicolumn” refers to a theme block of cards; making the whole area clickable typically requires the anchor to overlay or wrap the card content, not just expand via CSS.
Outcome: no finalized solution yet; last message is encouragement without a fix. Status: open.
Artifacts: screenshots illustrate before/after; the CSS snippet is central to understanding the issue.
Summarized with AI on December 14.
AI used: gpt-5.
Maybe try the following CSS (as in previous thread) but this won’t be easy:
/* Change background to black and text to white */
#shopify-section-template--23934807802195__multicolumn_DVY4P7 .multicolumn-card {
background-color: black !important;
}
#shopify-section-template--23934807802195__multicolumn_DVY4P7 .multicolumn-card__info a {
color: white !important;
}
/* Make the whole button area clickable */
#shopify-section-template--23934807802195__multicolumn_DVY4P7 .multicolumn-card__info a {
display: block;
width: 100%;
height: 100%;
padding: 20px;
text-align: center;
}