Multi-column section, how to show 3-4 columns for mobile (Dawn theme)

Topic summary

Goal: Show 3–4 columns in the Dawn theme’s Multicolumn section on mobile.

Issue: Editing the section schema to add 3/4 as mobile column options did not affect the layout.

Action taken:

  • Confirmed the target page via preview link.
  • Implemented a CSS override for mobile: in Assets > component-slider.css, add
    @media screen and (max-width: 749px){
    .grid–peek .grid__item { width: 25%; min-width: unset; }
    }
    This forces four items per row on small screens (25% each). Adjust as needed for three columns (e.g., width: 33.33%).

Outcome: Change worked; screenshots showed four columns on mobile. Thread marked effectively resolved by the original poster.

Notes:

  • Usability warning: images/cards become very small on mobile, likely requiring zoom; consider UX trade-offs.
  • The solution relies on CSS, not schema settings; schema changes alone won’t reflow the grid on mobile.

Status: Resolved with a CSS fix; no further questions pending.

Summarized with AI on January 7. AI used: gpt-5.

Works great! Thank you!

1 Like