How can I create three rows with multicolumn on mobile?

Store Design

Topic summary

A user needs to display 6 icons in a 3-column grid (3 rows of 2) on mobile devices within a multicolumn section.

Solution Provided:
Another user shared CSS code to be added to the theme’s custom.css or theme.css file, targeting the multicolumn card wrapper with media queries for screens under 749px width.

Follow-up Issue:
The initial CSS worked but made the icons too small. The user requested larger icons that better fill the available space.

Alternative Solution:
A PageFly representative suggested modified CSS code (targeting max-width: 749px) to be added to section-multicolumn.css, adjusting the multicolumn card wrapper width to 80% with !important flag.

The discussion remains open as the user hasn’t confirmed whether the sizing adjustment resolved their concern.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hey, thanks for the help, i need to make multicolumn 3 rows for mobile - the 6 icons below hero image, i want them to be 3 - 3 in row for mobile ! Thanks and site is :

2

Hi @lukkaa ,

Add this CSS code

Online Store > Themes > Edit code > Assets > custom.css or theme.css

@media screen and (max-width: 749px) {
  .grid--2-col-tablet-down .grid__item {
    width: 29% !important;
}
  .multicolumn-card__image-wrapper--third-width { width: 70%}
}
3

Thanks it worked but now icons are too small, can they be bit larger somehow to fill in the space around ? thank you so much !

4

Hi @lukkaa ,

This is Richard 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:

@media screen and (max-width: 749px) {
  .multicolumn-card__image-wrapper--third-width { 
      width: 80% !important;
    }
}

PageFlyRichard_0-1678204465249.png
PageFlyRichard_0-1678204465249.png418×527 16.2 KB

I hope it would help you
Best regards,

Richard | PageFly

1 Like