Dawn theme 2.0 - Multicolmn 3 in a row for mobile view

Store Design
, , ,
1

Hi everyone,

I have 6 icons in the multicolumn section. I would like these icons to be 3 per a row on mobile view, rather 2 in 3 rows if that makes sense.

I’ve tried some codes but nothing seems to work. Would really appreciate some help!

Screenshot 2022-12-07 at 20.50.28.png
Screenshot 2022-12-07 at 20.50.28.png908×1040 55.6 KB

Thank you!

2

Hello @henz123

Can you give me your Store URL( with pass if your store password is enabled) so I can check it for you?

Kind & Best regards,
GemPages Support Team

3

Hi @henz123 ,

Go to Assets > base.css and paste this at the bottom of the file:

@media screen and (max-width: 749px){
  .multicolumn-list__item {
    width: calc(33.33% - 1rem * 2 / 3) !important;
    max-width: 33.33% !important;
  }
}

Hope it helps!

4

Hi @henz123 ,

Please go to Online store > Themes > Edit code. Then open the Asset folder, and find the base.css file. Finally, scroll to the bottom of the file and add these codes:

@media only screen and (max-width: 750px){
  li.multicolumn-list__item.grid__item {
      width: 32%;
  }
}

I hope you will find it helpful!