Responsive Feature Layout

Combine a mobile-first Grid, controlled image slot, and decorative generated box.

Resize across 48rem

People recording observations beside a wetland

Wetland observation guide

At narrow widths the image and text stack. At wider widths a media query changes the Grid to two columns and gives the image a taller 4 / 3 slot.

The gold line is an empty ::after decoration. This title and description remain real document content.

Decision order

  1. Write meaningful source content.
  2. Build a usable narrow layout.
  3. Keep the image inside its slot.
  4. Add the wider layout only when the content has room.
  5. Use generated boxes only for optional presentation.

Important HTML

Feature sections combine heading, copy, and media.

<section class="feature">
  <div class="copy">…</div>
  <div class="media">…</div>
</section>

Important CSS

A min-width query switches the feature to a row.

.feature { display: block; }

@media (min-width: 48rem) {
  .feature {
    display: flex;
    gap: 1.5rem;
    align-items: center;
  }
}