CSS Media Queries and Breakpoints

Media queries apply CSS rules only when a media feature, such as viewport width, matches.

Use @media (min-width: 700px) { ... } to enable rules at 700 CSS pixels and above, or @media (max-width: 699px) for smaller widths. Modern range syntax such as @media (width >= 700px) is also available.

Pick breakpoints where a layout actually becomes cramped. A query can also test preferences such as prefers-reduced-motion; media queries are not limited to device widths.

At matching viewport widths, declarations inside @media enter the cascade just like ordinary CSS rules.

Start with a block that spans its parent.

HTML

<div class="notice-bar"><strong>New arrivals</strong><span>Explore the catalog</span></div>

CSS

.notice-bar { display: block; background: #eff6ff; border-radius: 10px; padding: 14px; } .notice-bar span { display: block; margin-top: 5px; }

Rendered output

Observe: The callout content is stacked.

Use a width condition to align text in a row on larger viewports.

HTML

<div class="notice-bar"><strong>New arrivals</strong><span>Explore the catalog</span></div>

CSS

.notice-bar { display: block; background: #d1fae5; border-radius: 10px; padding: 14px; } .notice-bar span { display: block; margin-top: 5px; } @media (min-width: 650px) { .notice-bar { display: flex; justify-content: space-between; gap: 16px; } .notice-bar span { margin-top: 0; } }

Rendered output

Observe: Resize your browser through 650px to see the layout switch.

At matching viewport widths, declarations inside @media enter the cascade just like ordinary CSS rules.

Compare the two examples: identify the selector, each changed property, and which visible part of the output proves that the CSS took effect.

• Queries for viewport width do not respond to an individual component resizing.

• Do not choose breakpoints solely because a device is described as tablet or desktop.

Add a 900px breakpoint changing the background color; inspect the two independent conditions.

Before changing the code, predict what will change. Then verify by checking the rendered result.

Use @media when a full-page viewing condition affects the layout.

Revisit the rendered examples if the rule still feels abstract. Change one declaration at a time so you can connect cause and effect.