Responsive Design Basics

"Responsive" means a page adapts to whatever screen it's viewed on, from a narrow phone to a wide monitor, without needing a separate mobile version.

Media queries

A media query wraps a block of CSS in a condition based on the viewport. This one only applies its rules when the browser window is 600px wide or less:

@media (max-width: 600px) {
  /* rules in here only apply at 600px wide or narrower */
}

Everything else on the page keeps its normal styling above that width.

Continuing the profile page

The CSS basics guide laid the hobbies list out as a row with display: flex. On a narrow phone screen, a row of badges can get cramped. A media query switches it to a column instead:

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

Same list, same HTML, no JavaScript involved: the layout itself just responds to the available width.

Flexible units

Fixed pixel widths on a page's main container force it to overflow on anything narrower. A few units that adapt instead:

• % — relative to the parent element's width
• vw / vh — a percentage of the viewport's width or height
• rem — relative to the root font size, good for text and spacing that should scale together

A common pattern: give a container max-width: 700px; alongside width: 100%;. It grows to fill narrow screens and stops growing past 700px on wide ones, instead of either overflowing or staying a fixed size everywhere.

Testing it

Resize your browser window and watch the page adjust in real time. Most browsers' developer tools also have a device toolbar that simulates common phone and tablet screen sizes directly, without needing an actual second device.