how can I arrange on desktop all four columns in one row (move “save time” up) while keeping the two-row structure on mobile? website: www.10xfuel.com:
desktop: move “save time” column up to the first row:
mobile: do not change
thank you!
Topic summary
Goal: Show all four Multicolumn items in a single row on desktop (move “Save time” up), while keeping the existing two-row structure on mobile.
Proposed solutions:
- CSS: Add a media query in section-multicolumn.css for screens ≥990px that sets each .multicolumn-list__item to 25% width (accounting for grid spacing). This forces four columns per row on desktop and leaves mobile unchanged.
- Theme settings: Use Online Store → Themes → Customize → Multicolumn to adjust desktop column layout directly in the editor (screenshot provided).
Context and terms:
- Dawn theme: Shopify’s default theme; Multicolumn is a section with configurable columns.
- Media query: CSS rule that applies styles only above a specified screen width (e.g., 990px) to target desktop.
Outcome/status:
- No confirmation yet that either method resolved the request; no errors or conflicts reported.
- Discussion remains open pending the requester’s validation.
Notes:
- Images illustrate desired desktop arrangement and unchanged mobile layout; they are central to understanding the request.
1 Like
why are you asking? What am I missing?
Hi @10xfuel ,
This is Kate 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 (min-width: 990px) {
.multicolumn-list .multicolumn-list__item {
width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
max-width: calc(25% - var(--grid-desktop-horizontal-spacing) * 3 / 4);
}
}
I hope it would help you
yes - I’d need a solution for that
@10xfuel
you can set from below
Online store->themes->customize->multicolumn->
1 Like