Dawn theme - Align multicolumn grid items

Store Design
,
1

Hi,

I am trying to add a multicolumn with 4 grid items on my website. In the editor, when I have 3 items in this section it remains aligned. But when I had a 4th one the last two are not aligned anymore. See below.

Capture dā€™eĢcran 2023-01-18 aĢ€ 15.56.46.png
Capture dā€™eĢcran 2023-01-18 aĢ€ 15.56.46.png1233Ɨ432 279 KB

Any idea on how to fix this? Is it a margin / padding edit to add to the code?

Thanks.

1 Like
2

Hi @Enkore ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

3

Hi @Amlibolikha ,

My store can be checked here: Enkore .

Thanks.

4

Hi @Enkore ,

This is Kate from PageFly - Landing page builder, Iā€™d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-multicolumn.css->paste below code at the bottom of the file:

.background-none .grid--2-col-tablet .multicolumn-list__item {
    margin-top: 0 !important;
}

I hope it would help you

1 Like
5

Brilliant! Thanks @PageFly-Kate , itā€™s fixed :+1:

6

Hi @PageFly-Kate ,

I spotted an issue after adding the code, appearing on mobile only. On the homepage the ā€œimage with textā€ + ā€œfeatured productā€ components are displayed weirdly: instead of having the image on one row and then text below as it used to be, it shrinks both (video attached).

Is there any way we can go back to the previous display for these sections on mobile, while keeping the improved display for the multicolumn asked before?

Website is Enkore.

Thanks,

Elise

7

Hi @Enkore ,

Sure, Iā€™m happy to help you. Letā€™s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/base.css->paste below code at the bottom of the file:

@media screen and (max-width: 767px) {
    .featured-product,
    .image-with-text .grid {
        display: block;
    }
    .featured-product > .grid__item,
    .image-with-text .grid > .grid__item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

I hope it would help you

8

Hi @PageFly-Kate ,

Thank you, it fixed the image-with-text display on mobile :+1:

The featured-product however is now occupying half of the width of the page (on mobile only), Iā€™ve attached a video.

9

Hi @Enkore ,

Iā€™m sorry to hear that. You can replace previous code by below code:

@media screen and (max-width: 767px) {
    .featured-product,
    .image-with-text .grid {
        display: block;
    }
    .featured-product.grid--1-col > .grid__item,
    .image-with-text .grid > .grid__item {
        width: 100% !important;
        max-width: 100% !important;
    }
}

I hope it would help you

1 Like
10

Itā€™s perfect, huge thanks for this @PageFly-Kate

1 Like