Editorial Layouts Don't Have to Collapse on Mobile

Editorial-inspired web design often gets written off as impractical for small screens. The assumption is that magazine-style compositions, with their columns, floating images, and text wraps, can't survive the transition to a narrow viewport. But those layouts fail not because the techniques are unresponsive, but because of how they're adapted. The answer isn't to flatten a composition into an endless single column; it's to treat each section as its own designed "moment" with distinct behaviors and scrolling patterns.

A series of three desktop-sized screenshots from Patty Meltt's website.

The challenge on mobile is that people lose context. Without visual anchors, sections blur together, hierarchy disappears, and a designed page becomes a content feed. On desktop, layout provides orientation—readers know where a section starts and ends, and what to expect next. On small screens, we can restore those cues by making sections behave differently from one another: grouping related content, introducing horizontal movement, and even shifting the composition when a device rotates.

The Tools for Small-Screen Magazine Design

A set of well-supported CSS features makes this kind of adaptive storytelling possible:

  • @media and @container queries
  • CSS Grid and Flexbox
  • Scroll Snap
  • Orientation media features
  • Logical properties

These give us alternatives to the predictable vertical stack—ways to create rhythm and guide readers without relying on complex column structures.

Transform Grids into Horizontal Scrollers

Consider a discography section designed as a modular grid of album covers on desktop. On a small screen, instead of stacking those albums vertically, rearrange them into a horizontally scrollable row. Horizontal scrolling is a familiar gesture, and it gives that set of content its own visual territory.

Set up the parent modular-wrap item as a container, then define the grid and the module styles that build the layout.

.modular-wrap {
  container-type: inline-size;
  width: 100%;
}
.modular {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  overflow-x: visible;
  width: 100%;
}

The instinct might be to collapse those grid modules into one column under a media query, but that flattens the experience.

Album covers arranged in a single column.
Collapsing grid modules on small screens into a single column

A container query instead rearranges the albums along a horizontal axis and allows swiping through them.

@container (max-width: 30rem) {
  #example-1 .modular {
    display: grid;
    gap: 1.5rem;
    grid-auto-columns: minmax(70%, 1fr);
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-template-rows: 1fr;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}
A paragraph of text above a series of albums covers arranged in a single row, overflowing the screen for scrolling.
Album covers are arranged horizontally rather than vertically. See this example in my lab.

The albums now form a cohesive, swipeable group that doesn't disrupt the reader's position in the wider flow of the page.

Use the Off-Canvas Space

Techniques normally reserved for wide desktop layouts, like text flowing around an image with shape-outside, don't have to be discarded on smaller viewports. They can be moved into a horizontal scrolling context where part of the content sits off-canvas. That visual hint—a sliver of content just outside the viewport—encourages interaction.

Patty Meltt staring straight into the camera in between two columns of text.
The illusion of text flowing around both sides of an image

For one type of layout, content spans two equal-width divisions. The first has one half of an image floated right; the second holds the other half floated left. Together, they give the illusion of one centered image with text flowing around both of its sides.

<div class="content">
  <div>
  <img src="img-left.webp" alt="">
  <p><!-- ... --></p>
  </div>

<div>
  <img src="img-right.webp" alt="">
  <p><!-- ... --></p>
  </div>
</div>

A section wraps both divisions so that a container query controls the change:

<section>
  <div class="content">
    <!-- ... -->
  </div>
</section>
section {
  container-type: inline-size;
  overflow-x: auto;
  position: relative;
  width: 100%;
}

The two-column-wide grid applies at all sizes:

.content {
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

Below a 48rem container width, the columns each take 85% of the container's width.

@container (max-width: 48rem) {
  .content {
    grid-template-columns: 85vw 85vw;
  }
}

That slight overflow shows a preview of what's next—enough to hint the section scrolls horizontally.

Showing the left and right halves of a layout that supports horizontal scrolling.
Some of the right-hand column’s content is visible. See this example in my lab.

Sections as Mini Magazine Spreads

This principle extends beyond a single row of content. Whole sections can be revamped as miniature spreads that rely on horizontal swiping instead of vertical scrolling. The shape-outside technique used at large sizes—where text threads between two images that spill beyond their containers—can be preserved on mobile, but with a twist. Swiping becomes a deliberate action pacing the reader's progress, much like turning a page.

A desktop layout showing a column of text in between two columns of differently-sized and shaped images.
Sections can behave like self-contained mini magazine spreads.
<div class="content">
  <img src="left.webp" alt="">
  <img src="right.webp" alt="">
  <p><!-- ... --></p>
  <p><!-- ... --></p>
  <p><!-- ... --></p>
</div>
.content img:nth-of-type(1) {
  float: left;
  width: 45%;
  shape-outside: url("left.webp");
}

.spread-wrap .content img:nth-of-type(2) {
  float: right;
  width: 35%;
  shape-outside: url("right.webp");
}

The outer section provides a reference width for a container query. Below the breakpoint, Flexbox with horizontal scrolling takes over:

<section>
  <div class="content">
    <!-- ... -->
  </div>
</section>
section {
  border: 1px solid var(--border-stroke-color);
  box-sizing: border-box;
  container-type: inline-size;
  overflow-x: auto;
  padding: 1.5rem;
  width: 100%;
}
@container (max-width: 48rem) {
  .content {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
}

Container query units (cqi) size the flexible columns in proportion to the section's width, so panels can scroll sideways within that space.

.content > * {
  flex: 0 0 85cqi;
  min-width: 85cqi;
  scroll-snap-align: start;
}
Showing a three-column layout split between three screenshots to demonstrate horizontally scrolling through the layout.
On small screens, the layout flows from image to paragraphs to image. See this example in my lab.

Those panels—image, paragraphs, image—stack sequentially in the swipe. Images are set to auto-height with object-fit to stay undistorted when flexed:

.content img {
  display: block;
  flex-shrink: 0;
  float: none;
  height: auto;
  max-width: 100%;
  object-fit: contain;
}

Flexbox order repositions elements for the sequence:

.content img:nth-of-type(2) {
  order: 100;
}

Make Orientation a Design Cue

Rotating a phone isn't just a way to see more of the same; it's a chance to present an entirely different format. Landscape orientation can add columns or trigger text layouts that wouldn't work stacked vertically in portrait.

A desktop layout showing a picture of Patty Meltt sitting and playing an acoustic guitar as text flows around the shape of the image on the right.
Turning a phone sideways is an opportunity to recompose a layout.

Rather than simply letting a portrait composition stretch, apply orientation: landscape in a media query and broaden the layout with 

@media (orientation: landscape) {
  .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

For biography pages, a portrait orientation keeps text flowing vertically. But when held sideways, that content can restructure to flow around an image with a strong geometric shape. The approach uses an image placed inline at full width, floated, with a clip-path covering part of it.

<div class="content">
  <img src="patty.webp" alt="">
  <!-- ... -->
</div>
.content > img {
  float: left;
  width: 100%;
  max-width: 100%;
}

Coordinates matching that clip path are assigned to shape-outside with a shape-margin, so text flows around the profile of the cut-out.

.content > img {
  shape-outside: polygon(...);
  shape-margin: 1.5rem;
}

Both properties are scoped inside a query for orientation set to landscape:

@media (orientation: landscape) {
  .content > img {
    float: left;
    width: 100%;
    max-width: 100%;
    shape-outside: polygon(...);
    shape-margin: 1.5rem;
  }
}
Image of Patty Meltt sitting and playing an acoustic guitar above a column of text.
See this example in my lab.

Preserve the Stories, Not the Formulas

Editorial design adapts, but not by shrinking the desktop print grid. When a layout on a small screen each section flexes, scrolls, or shifts on rotation, some the printed spread's energy—rhythm, discovery, and a bit of surprise—can be intact. Design keeps its impact even with less space by reminding the reader it was intentionally crafted.