CSS Responsive

Your visitors will not all use the same screen. Some will open your site on a wide desktop monitor, some on a laptop, and many on a phone held in one hand. A responsive page is one that looks good on all of them — the same page, the same content, but the layout bends to fit the screen it is on.

Diagram — see how it fits together

The main tool for this is the media query: a rule that says "only apply this CSS when the screen is this wide or narrower". With a few media queries, three columns on a desktop become one column on a phone, and a big heading becomes a smaller one.

The viewport tag — the first step

Before any media query works properly on a phone, the page needs one line in its <head>. Without it, a phone pretends to be a wide desktop screen and shrinks the whole page down, leaving tiny unreadable text that the visitor has to pinch and zoom. The viewport tag tells the phone to use its real width instead.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Media queries — different rules for different screens

A media query starts with @media and a condition, usually max-width. The CSS inside it only applies when the screen is that width or smaller. The usual pattern is to write the desktop layout first, then add a media query that changes it for small screens.

Syntax — three columns become one

.columns { display: flex; gap: 20px; }
.column { flex: 1; padding: 15px; }

@media (max-width: 600px) {
  .columns { flex-direction: column; }
}

On a wide screen the three columns sit side by side. When the screen is 600px wide or less, the media query flips the flex direction to column and the same three boxes stack on top of each other — no sideways scrolling, no tiny text.

Flexible images and text

Two more habits make a page responsive. First, images should never be wider than their container: max-width: 100% with height: auto lets a big photo shrink to fit a phone screen while keeping its shape. Second, use flexible widths — percentages and fr units — instead of fixed pixel widths, so the layout can breathe.

Common mistakes

• Forgetting the viewport tag — the phone shrinks the whole desktop page and nothing looks right.
• Using fixed pixel widths like width: 900px for the main container — the page overflows on phones. Use max-width instead.
• Forgetting max-width: 100% on images — a wide photo pushes the page wider than the screen and causes sideways scrolling.
• Writing a media query but testing it only on a desktop browser — always check on a real phone too, where the viewport tag matters.
• Picking a breakpoint like 600px and never checking the in-between sizes — test at a few widths, not just one.

Remember

• Responsive means the same page fits every screen — desktop, laptop, and phone.
• Add the viewport tag to the <head> or phones will shrink the whole page.
• A media query applies CSS only when its condition is true, like @media (max-width: 600px).
• Images need max-width: 100% and height: auto to shrink safely.
• Mobile-first means designing for the small screen first, then adding rules for bigger ones.

Example explained

• <meta name="viewport" ...> — in the head, this tells a phone to use its real screen width, so the media query works properly on a real device.
• .columns { display: flex; } — on a wide screen the three boxes sit side by side in a row, each with flex: 1 for an equal share.
• @media (max-width: 600px) — when the screen is 600px wide or less, the rules inside this block take over.
• flex-direction: column — inside the media query, the row becomes a column, so the three boxes stack on top of each other on a phone.
• img { max-width: 100%; height: auto; } — the photo shrinks to fit its box on a small screen instead of overflowing it.