How to edit the grid design of a MultiColumn for mobile?

llo2ay · ‎04-13-2022

Hi, I am currently working on a shopify website - specifically the "Dawn" theme.

And I know it is possible to edit the design of particularly the mobile aspect:

What I want to do is replicate the desktop design to the mobile design (currently, in mobile it shows 1 column per row, while I would like it to be 2 columns per row, just like desktop)

Here is my published website link: https://albertodinero.com/

AvadaCommerce · ‎04-13-2022

Hi @llo2ay ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/section-multicolumn.css->paste below code at the bottom of the file:

.multicolumn-list__item {
   max-width: 50% !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

View solution in original post

Zworthkey · ‎04-13-2022

@llo2ay

Kindly share a screenshot of which you are looking.

Thank you.

@media screen and (max-width: 767px){
.multicolumn:not(.background-none) .multicolumn-card {
    width: 95% !important;
}
.grid--1-col .grid__item {
    max-width: 50% !important;
    width: 50% !important;
}
}

Add this code in the bottom of the section-multicolumn.css file.

llo2ay · ‎04-13-2022

Of course,

Here are two screenshots: one is desktop the other is mobile. I'm aiming to have it look like the desktop

DesktopMobile

llo2ay · ‎04-13-2022

Actually, also while I'm at it - I would like to make the font bolder and/or bigger where it says "Men" / "Women"...
Would hugely appreciate that!

Zworthkey · ‎04-13-2022

@llo2ay

.multicolumn-card__info h3 {
    font-size: 24px !Important;
    font-weight: 800 !important;
}

@llo2ay
Add this code in the bottom of the section-multicolumn.css file

llo2ay · ‎04-13-2022

Thanks a lot for your help!!

vikaspateldesig · ‎04-13-2022

GO to Theme Edit
multicolumn.liquid section and change heighlighted code as per screenshot
line number 16

Halothemes · ‎04-13-2022

Hi @llo2ay ,

You can try follow the instruction below:
1. Go to Online Store -> Theme -> Edit code.
2. Asset -> create separate css file for css code then paste code below in the file.
Ex: /custom.css

@media screen and (max-width: 767px){
.multicolumn:not(.background-none) .multicolumn-card {
    width: 95% !important;
}
.grid--1-col .grid__item {
    max-width: 50% !important;
    width: 50% !important;
}
}

3. Layout -> /theme.liquid -> paste code below into the tag <head></head> of the file:

{{ 'custom.css' | asset_url | stylesheet_tag }}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

Best regards.

HaloThemes - Top Premium Shopify Theme Provider
Ella Shopify Theme OS 2.0 - #1 Best Selling Shopify Theme of All Time
Want to try Shopify? Open a Store for FREE

AvadaCommerce · ‎04-13-2022

Hi @llo2ay ,

You can follow the instruction below:

1. Go to Online Store->Theme->Edit code
2. Asset->/section-multicolumn.css->paste below code at the bottom of the file:

.multicolumn-list__item {
   max-width: 50% !important;
}

If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.

banned

llo2ay · ‎04-13-2022

Thank you so much! Hugely appreciate it.
And thanks everyone for all of the suggested solutions!

Parla · ‎06-16-2025

Hello, I did that. it resized the columns, but still shows one column per row.

vikaspateldesig · ‎04-13-2022

Change Class Name

You Just need to rename your class from "grid--1-col" to "grid--2-col"