Change Number Of Columns In Multicolumn - Dawn 2.0

Store Design

Topic summary

A user wants to display 6 icons per row in Dawn 2.0’s multicolumn section instead of the default maximum of 4. Currently, with 6 icons, they wrap to a second row.

Additional requests:

  • Remove white space between icons
  • Apply one background for the entire section

Proposed solution:
A custom CSS code snippet was provided to add to section-multicolumn.css, targeting the grid layout with a max-width: 16.66% adjustment for tablet screens.

Current status:

  • The initial code solution did not work when tested
  • A preview link was shared for troubleshooting
  • A separate user asked how to make the customization page-specific, as the code affects all multicolumn sections site-wide when they only want it applied to certain pages

The discussion remains open with the original issue unresolved and an additional question about page-specific targeting.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hi,

I’d like to change the max number of icons in raw in the multicolumn to 6 instead of 4.

currently, when i have 6 icons this is what happens:

Shauletay_0-1643795132404.png
Shauletay_0-1643795132404.png617×262 47.8 KB

I want all 6 to be in the same raw.

Another thing, I’d like to remove the ■■■■■ space between the icons, and make so there’s one background for the entire section.

this is what i have now:

Shauletay_1-1643795132709.png
Shauletay_1-1643795132709.png998×290 19.2 KB

thanks!

2

Hii, @Shauletay

kindly share your store access so we can customize the columns to 6 instead of 3.

As, this can be done through custom code.

3

https://www.mycozmo.com/

Password: gliask

4

@Shauletay

premadestores_0-1643799951899.png
premadestores_0-1643799951899.png1349×620 531 KB

5

@Shauletay unable to open website properly . can you please tell where we can add password to access your store.

Thanks in advance

6

@Shauletay for adding 6 columns in theme you can done through custom coding :

Let’s try this code and let me know if it works.

please add this code

  1. Go to Online Store->Theme->Edit code

  2. Asset->/section-multicolumn.css ->paste below code at the bottom of the file.

@media screen and (min-width: 750px){
#shopify-section-template--15298090008815__1635154722a243cb8f .grid--2-col-tablet .multicolumn-list__item {
    margin-top: 1rem;
    max-width: 16.66% !important;
}
}
7

sorry but this code didnt change anything.

you can check this preview link of my store:

https://9bl8zm1e4999hbfu-56517656739.shopifypreview.com

thanks

8

Hi @premadestores

Thanks for this tip. I was wondering if you know how to make it page specific. I am already using the Multicolumn on the home page and like its current size. However, I want to make these smaller on a different page. When I added your code it changed all pages using the multicolumn.

Any extra advise? Thanks