Assistance with Multicolumn sizes (Dawn Theme)

Technical Q&A
,
1

Hello! This is my first time asking for help so I hope that this is the right place to do so. I am currently working on a theme, and I want to be able to adjust the width between the white boxes (basically the left/right padding between each one) and maybe have them be like 50% of the overall size that they are currently (or at least be able to adjust it as I can’t find where to do that). I’m not sure how to accomplish that! Thank you so much!

I was also wanting to add a hover effect to the custom account/cart/search icons that makes them a little bit bigger on hover. I was unable to figure out how to accomplish that either.

image
image1856×814 197 KB

Website Template: Dawn
Website URL: c-tama
Website Password: Detong

2

For hover effect add this to the “theme settings”-> “Custom CSS” or “Custom CSS” of the Header section. You can change the scale value to your liking.

.header__icon:hover {
  transform: scale(1.1);
}

Multicolumn spacing you can control by setting these CSS variables, like so, preferably in the section “Custom CSS”:

.multicolumn-list {
  --grid-desktop-horizontal-spacing: 40px;
  --grid-desktop-vertical-spacing: 40px;
  --grid-mobile-horizontal-spacing: 10px;
  --grid-mobile-vertical-spacing: 10px;
}

Screenshot 2026-06-07 at 4.24.43 PM
Screenshot 2026-06-07 at 4.24.43 PM1262×565 56.5 KB

3

These both work and are perfect thank you! If I want to change the height/width of the white boxes themselves, how would I do that?

4

Their widths are calculated based on the width of the section and gap.
The code is like this:

@media screen and (min-width: 990px) {
  .grid--5-col-desktop .grid__item {
    width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
    max-width: calc(20% - var(--grid-desktop-horizontal-spacing) * 4 / 5);
  }
}

Meaning for 5 column grid one items width is 1/5 minus 4/5 times gap between items…

You can control section width though with code like this in sections “Custom CSS”:

.multicolumn {
  --page-width: 90rem;
}
5

This is perfect thank you so much!