Increase spacing at a breakpoint

Provide compact spacing on mobile and generous spacing on desktop.

Official sourceW3C Media Queries — conditional applicationReviewed: 2026-08-26

STEP 1 · LEARN

How it works

Breakpoints are not only for columns. Any declaration can respond to the condition; here padding grows only when the viewport is at least 1024px wide.

Correct example

.section { padding: 16px; } @media (min-width: 1024px) { .section { padding: 48px; } }

Content uses phone space efficiently but gains more breathing room on large screens.

Common mistake

@media (max-width: 1024px) { .section { padding: 48px; } }

Large padding on screens up to 1024px can waste mobile space.

STEP 2 · APPLY

Your exercise

Keep 16px padding and set 48px from a width of 1024px.

index.htmlCSS

Safe resultisolated

The draft stays only in this browser.HTML and CSS allowed · scripts and network blocked

STEP 4 · CHECK

What needs to pass

0%not checked

The base padding is 16px.
At a minimum width of 1024px padding is 48px.
The target element is present in the page.

Explain the solution logic

The cascade keeps the base value until the min-width condition becomes true.

How it works

Your exercise

Write and see the result

What needs to pass