Responsive Design CSS Interview Questions

A media query applies CSS only when a condition about the device or viewport is true, most often its width.

<style>
  .card { padding: 12px; background: #fde68a; }
  .card::after { content: " (narrow: under 500px)"; }
  @media (min-width: 500px) {
    .card { background: #bbf7d0; }
    .card::after { content: " (wide: 500px or more)"; }
  }
</style>
<div class="card">The preview's width picks the color</div>

Change 500px to 2000px to see the other branch. You can also test preferences (prefers-color-scheme), input (pointer: coarse), print, and ranges like @media (width >= 600px). More in media queries.

Without it, mobile browsers lay the page out about 980px wide and zoom out, so your small-screen media queries never match and the text is tiny.

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

Do not add maximum-scale=1 or user-scalable=no: blocking zoom is an accessibility failure.

Base styles target the smallest screen, and min-width media queries enhance the layout as the screen grows. Desktop-first is the reverse, with max-width queries that undo things.

.list { display: grid; gap: 12px; }            /* phones: one column */

@media (min-width: 640px) {
  .list { grid-template-columns: 1fr 1fr; }    /* tablets */
}
@media (min-width: 1024px) {
  .list { grid-template-columns: repeat(4, 1fr); }
}

Phones then skip the wide-screen rules instead of applying and undoing them. Put breakpoints where your content breaks, not at device widths.

rem is relative to the root font size; em to the element's own font size (for font-size, its parent's), so em compounds when nested.

<style>
  .em { font-size: 1.2em; }
  .rem { font-size: 1.2rem; }
</style>
<div class="em">1.2em <div class="em">1.2em <div class="em">1.2em</div></div></div>
<div class="rem">1.2rem <div class="rem">1.2rem <div class="rem">1.2rem</div></div></div>

With a 16px root the em levels are 19.2px, 23.04px and 27.648px; every rem level is 19.2px. Use rem for type and spacing, em where sizes should follow the element's own text.

clamp(min, preferred, max) returns the preferred value kept between the limits. With a viewport unit in the middle, the size grows with the screen with no breakpoints.

<style>
  h1 { font-size: clamp(1.5rem, 1rem + 4vw, 3rem); margin: 0 0 8px; }
  .box { width: clamp(200px, 50%, 400px); background: #dbeafe; padding: 8px; }
</style>
<h1>Fluid heading</h1>
<div class="box">Between 200px and 400px, otherwise half the width</div>

Keep a rem part (1rem + 4vw, not 4vw): pure viewport units ignore browser zoom and the user's font size.

In CSS, max-width: 100%; height: auto; stops overflow and keeps the ratio, and object-fit: cover crops into a fixed box. In HTML, srcset and sizes let the browser pick the file:

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     sizes="(min-width: 800px) 50vw, 100vw"
     width="800" height="600" alt="Team at the office">

Keep width and height: the browser reserves the space before loading, which prevents layout shift (CLS).

A media query asks about the viewport; a container query asks about an ancestor marked as a container, so one card can stack in a sidebar and sit side by side in the main column.

<style>
  .slot { container-type: inline-size; border: 1px dashed #9ca3af; padding: 6px; margin-bottom: 8px; }
  .narrow { width: 240px; }
  .wide { width: 480px; }
  .card { display: grid; gap: 8px; }
  .thumb { height: 60px; background: #2563eb; }
  @container (min-width: 400px) {
    .card { grid-template-columns: 100px 1fr; }
  }
</style>
<div class="slot narrow"><div class="card"><div class="thumb"></div><p>Narrow container: stacked</p></div></div>
<div class="slot wide"><div class="card"><div class="thumb"></div><p>Wide container: side by side</p></div></div>

container-type: inline-size is required so the container's width cannot depend on its children.

On mobile, 100vh assumes the address bar is hidden, so while it shows, the bottom of a 100vh section is cut off. Use svh (browser UI shown), lvh (UI hidden) or dvh (follows the UI).

.hero {
  min-height: 100vh;   /* fallback for old browsers */
  min-height: 100svh;  /* never hidden under the address bar */
}

Prefer svh: dvh resizes while the user scrolls. Use min-height so content can grow.

A breakpoint is a viewport width at which a media query changes the layout. Set one where the content starts to look wrong (lines too long, cards too cramped) rather than per phone model; two or three are usually enough. Writing them in em, as in @media (min-width: 48em), has a bonus: in a media query em means the browser's default font size, so the layout also adapts when a user enlarges their text.

100vw is the full viewport width including the vertical scrollbar, while the page's content area excludes it. On desktop browsers with classic scrollbars, an element at 100vw is wider than the page by the scrollbar's width and adds a horizontal scrollbar. Phones and macOS hide their scrollbars over the content, so the bug often shows up late. Use width: 100% instead; 100vw is only safe when the page cannot scroll vertically.