Viewport and Mobile-first Design

Mobile-first styling begins with a usable single-column layout and introduces more columns only when content has enough room.

In the HTML <head>, <meta name="viewport" content="width=device-width, initial-scale=1"> tells mobile browsers to use the device-width layout viewport. It belongs in the document, not inside a CSS rule.

Write the small-screen styles first, then use @media (min-width: ...) for wider layouts. This reduces the number of overrides required.

Begin with a layout that works even in a narrow browser.

HTML

<div class="feature-grid"><article>Search destinations</article><article>Save favorites</article></div>

CSS

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .feature-grid article { background: #dbeafe; padding: 16px; border-radius: 8px; }

Rendered output

Observe: The two cards stack by default.

Add a second track on wider browser viewports.

HTML

<div class="feature-grid"><article>Search destinations</article><article>Save favorites</article></div>

CSS

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 10px; } .feature-grid article { background: #ccfbf1; padding: 16px; border-radius: 8px; } @media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

Rendered output

Observe: Resize the whole browser: the media query responds to viewport width, not just to this output panel.

A base one-column grid works at any width. When the browser viewport satisfies a min-width condition, a later rule can enable two columns.

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

• Without the viewport meta tag, mobile layout behavior may surprise you.

• A media query checks the viewport unless it is specifically a container query.

Change the min-width breakpoint to 900px and watch when the second column appears.

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

Use a working narrow baseline, then enhance layouts where the content needs space.

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