Solved

Can I maintain three columns in a row with Dawn 2.0 in Shopify?

MikeBaguyo
Explorer
48 0 18

Hi! I'm using Dawn 2.0 theme. Regarding the "Multicolumn" on home page. By default, it's showing 3 columns in a row, but when I try to add a column, it becomes 2 columns in a row, how can I make it still 3 columns in a row? I want to add 3 columns and I want it to maintain the 3 columns in a row.

MikeBaguyo_0-1635250047161.png

My store url: chrisandleon.com

 

Thanks in advance!

 

Accepted Solution (1)

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@MikeBaguyo 

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: 33.33% !important;
}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app

View solution in original post

Replies 10 (10)

Ecommpremium
Shopify Partner
512 43 92

ca you go to multicolumn section and share the code so I can give you exact solution! @MikeBaguyo 

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
MikeBaguyo
Explorer
48 0 18

Hi! Do you mean in the customization? or in the "Edit code"? What codes do I share? Thanks!

Ecommpremium
Shopify Partner
512 43 92

you can add three columns in one section in customization and add another section of multicolumn then again add three columns in a row!

@MikeBaguyo 

- Did we solve your issue? Like & Mark As Solution to help the community
- SKYPE: ahsanaliawan
- 300+ Video Tutorials
-Website
MikeBaguyo
Explorer
48 0 18

Yes, it's possible. But the space between the 2 "Multicolumn" lists is a little bit weird now, unlike if the columns are all under 1 "Multicolumn" list 😞 I think it may need some coding which I'm not an expert with 😞 

dmwwebartisan
Shopify Partner
12280 2546 3693

This is an accepted solution.

@MikeBaguyo 

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: 33.33% !important;
}
}

Thanks!

 

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com |  Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
MikeBaguyo
Explorer
48 0 18

Thank you so much!!!!!! Thank you! 😄 😄 😄

reelfishy
Excursionist
26 0 2

@dmwwebartisan  

Hi! I'm switching from Supply to Dawn 2.0 theme. Regarding the "Multicolumn" on home page. My default is showing only 2 columns in a row, but I'd like to show 3 columns, similar to @MikeBaguyo requested.  I tried your code pasting at the bottom but this didn't work for me.  I still only have 2 columns.  And another issue is my titles are way too big.  How can I make the fonts smaller on the home page and my collections pages?  Thanks!

section-multicolumn.css

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

Screen Shot 2021-11-01 at 7.35.46 PM.pngScreen Shot 2021-11-01 at 7.35.56 PM.pngScreen Shot 2021-11-01 at 7.36.11 PM.png

Maxim90
Excursionist
24 0 6

Ciao @MikeBaguyo , vorrei che la multicolonna fosse a scorrimento anche nella versione Desktop. Come posso fare? È possibile anche attivare uno scorrimento automatico? Grazie

sharon73
Visitor
3 0 0

I have a similar question.  Instead of 2 rows though, I want 1 row of 4 columns.  How can I do that? 

https://www.tailoredfoxboutique.com/

Logius
Explorer
48 0 14

This does not work.