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

Store Design
1

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/

2

@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.

3

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;
}
}
  1. Layout → /theme.liquid → paste code below into the tag 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.

4

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.

5
6

Of course,

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

Desktop
Desktop1452×830 167 KB

Mobile
Mobile467×761 206 KB

7

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!

8

@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

9

Screenshot from 2022-04-13 15-47-13.png
Screenshot from 2022-04-13 15-47-13.png1600×900 290 KB

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

10

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

11

Thanks a lot for your help!!

12

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