Responsive design, media queries, hover and focus states

People read your page on a phone in a queue, on a laptop at home and on a big screen at work. A page that looks fine on one can be unreadable on another. Responsive design means writing one page that adapts to the space it has. The second half of this lesson is about states: how a button or link looks when the pointer is over it or when a keyboard user has landed on it, which is a matter of comfort for some and of access for others.

One page, many screens

Responsive design means a page changes its layout to suit the width of the screen. The approach most people recommend is mobile first: write the simple, one-column layout for a phone first, then add rules for larger screens. A phone layout is the hardest to get right, and starting there keeps pages fast and readable.

Two things make this work. First, the viewport tag in the head, <meta name="viewport" content="width=device-width, initial-scale=1">. Without it, many phones pretend the screen is much wider and shrink the whole page to fit, so text becomes tiny. Second, flexible sizes: use max-width: 100% for images, rem for text and a grid or flex layout that can wrap, rather than fixed pixel widths.

img {
  max-width: 100%;
  height: auto;
}

Media queries and breakpoints

A Media query is a conditional CSS block: the rules inside apply only when the condition is true. The most common condition is a minimum width. The query @media (min-width: 40rem) { ... } means "when the viewport is at least 40rem (about 640 pixels) wide, apply these rules". The width at which the layout changes is called a breakpoint. Choose breakpoints where your content starts to look wrong, not at the sizes of particular devices.

.cards {
  display: grid;
  gap: 12px;
}

@media (min-width: 40rem) {
  .cards {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Read it as a story. By default, the cards are in a grid with no column rule, so each sits on its own row, which is the phone layout. When the screen reaches 40rem, the media query switches on and the same grid gets three equal columns. You write the small version first and only add what changes.

Hover and focus states

Elements can have states, and CSS reaches them with a colon and a keyword called a pseudo-class. :hover applies while the mouse pointer is over an element. :focus applies while an element has keyboard focus, for example after someone presses the Tab key to reach a link or a form field. :focus-visible applies focus styles only when the browser decides a visible indicator is needed, which is mainly for keyboard use. :active applies while a button is being pressed.

.button {
  background-color: #1b5e20;
  color: #ffffff;
  padding: 10px 16px;
  border-radius: 6px;
  text-decoration: none;
}

.button:hover {
  background-color: #2e7d32;
}

.button:focus-visible {
  outline: 3px solid #ffb300;
  outline-offset: 2px;
}

The hover rule is a nice touch, but on a phone there is no pointer, so never hide important information behind hover. The focus rule matters more. A keyboard user, or anyone who cannot use a mouse, relies on the focus outline to know where they are on the page, as you can only see where you are by seeing the highlight. Browsers draw a default outline, and the common mistake is to remove it with outline: none; and put nothing in its place.

Other things to design for: make tap targets at least about 44 pixels high so thumbs can hit them, give users a way to enlarge text without breaking the layout, and consider a prefers-reduced-motion media query if you ever add animation. Media queries can ask about more than width; they can also notice a reader's preference for reduced motion or a dark colour scheme.