How can I arrange 6 multi columns into 2 rows of 3 in Dawn theme?

Technical Q&A
1

Hi,

I have 6 multi columns in Dawn and I would like them to be in 2 rows of 3 if possible? I’ve tried this code but it doesn’t seem to work?

@media screen and (min-width: 990px) {
.grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item:nth-of-type(-n+4) {
    margin-top: 1rem;
}
.grid--2-col-tablet.grid--4-col-desktop .multicolumn-list__item {
    width: calc(33.3333% - 1rem * 3 / 4);
    max-width: 33.3333%;
}
}
2

Hi and welcome!

Could you post a link to your store and i can take a look for you :slightly_smiling_face:

3

Hi mate,

here’s a link https://greenearthhabitats.co.uk/

many thanks

4

Perfect!

So instead of it being:

2 Images

2 Images

2 Images

you want it to be:

3 Images

3 Images

on the home page?

1 Like
5

yes please

6

Awesome!

Add this to the bottom of your base.css file:

@media screen and (min-width: 750px)
.grid--2-col-tablet .grid__item {
    width: calc(50% - 25.5rem) !important;
}

@media screen and (max-width: 749px)
.multicolumn-list {
    margin: 0;
    width: 100% !important;
}

Let me know if this is okay for you :slightly_smiling_face: