Change number of icons in multicolumn - dawn 2.0

Store Design
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:

Screen Shot 2022-02-01 at 7.10.50 PM.png
Screen Shot 2022-02-01 at 7.10.50 PM.png1440×611 186 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:

Screen Shot 2022-02-01 at 7.14.35 PM.png
Screen Shot 2022-02-01 at 7.14.35 PM.png1432×416 17.5 KB

thanks!

1 Like
2

@Shauletay ,

Share the Store url please.

3

www.mycozmo.com

P: gliask

please check product page as well.

Thanks!

4

@Shauletay ,

On which page ?

5

6 columns request on the sofa product page. - https://www.mycozmo.com/products/1-seater

space between columns request on the homepage.

thanks

6

Hi @Shauletay

li.multicolumn-list__item.grid__item.center {
    width: 15%;
    margin: 0;
}

Add this css at the bottom of Online Store->Theme->Edit code->Assets->section-multicolumn.scss.liquid

Note : add this css in this media only @media screen and (min-width: 990px)

ul#Slider-template--15146058514595__multi_column {
    background: rgba(var(--color-foreground),.04);
}

Add above css too… in same file

7

Im sorry, but i dont understand.

Di i need to paste the 2 snippets in section-multicolumn.scss.liquid?

and what do you mean "add this css in this media only @media screen and (min-width: 990px)" ?

thanks

8

@Shauletay ,

Search this text “@media screen and (min-width: 990px)” and add css under this

9

which one? the first snippet or the second?

Screen Shot 2022-02-04 at 11.57.59 AM.png
Screen Shot 2022-02-04 at 11.57.59 AM.png913×575 75.8 KB

10

@Shauletay ,

Yes

11

ok. but which snippet to paste there? the first or the second?

Thanks!

12

Hi @Shauletay ,

1- First CSS you have to add under that media.

2- second CSS you can add bottom of the file.

13

Thank you! it worked!

what about the second question?

Screen Shot 2022-02-04 at 12.25.34 PM.png
Screen Shot 2022-02-04 at 12.25.34 PM.png1420×348 54.2 KB

If i choose the option “show as column background” , it will have this spaces between the columns. how can i remove the spaces and make it 1 full strip?

Thanks again!

14

@Shauletay ,

.multicolumn.background-none.no-heading {
    background: rgba(var(--color-foreground),.04);
    overflow: hidden;
}
15

Hi again,

I just changed to the new dawn 3.0.0 and tried this code, and now it’s not working.

Maybe it’s because the asset is now named section-multicolumn.css

Any ideas?

Thanks!

16

@Shauletay ,

Check this file in asset globo.swatch.css

17

It worked! thanks