Frontend interview practice question

How can you make an element responsive using CSS?

HighIntermediateCss
By FrontendAtlas Editorial · Updated Oct 12, 2026

Interview quick answer

Making an element responsive means it adapts fluidly to different screen sizes, container widths, and user settings. Core techniques include fluid sizing, flexible media, modern layout systems (flexbox/grid), media and container queries, responsive typography, and intrinsic sizing utilities like aspect-ratio. Includes the media query breakpoint strategy, user-preference queries like prefers-reduced-motion and prefers-color-scheme, and the pitfalls of viewport-only thinking.

Interview focus

This CSS interview question tests whether you can explain you make an element responsive in CSS, connect it to production trade-offs, and handle common follow-up questions.

  • you make an element responsive in CSS explanation without falling back to memorized definitions
  • Responsive and Layout reasoning, edge cases, and production failure modes
  • How you would answer the most likely CSS interview follow-up
Practice more CSS interview questions
Interview answer drill

Use this CSS interview question to rehearse a quick answer, common mistake, follow-up, and production pitfall.

Practice more CSS interview questions Follow 7-day crash study plan Open Essential 60

Full interview answer

Overview

A responsive element resizes and reflows gracefully across devices. CSS enables this with fluid units (%, vw, rem), max-width constraints, flexible media (<img>, <video>), layout primitives (flexbox, grid), and conditional rules (media or container queries). The goal is to avoid fixed dimensions and let the element adapt to its environment.

Technique

What It Does

Typical Snippet

Fluid width

Lets the element scale with its container

div.card { width: 100%; max-width: 680px; }

Flexible media

Prevents images/videos from overflowing

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

Responsive typography

Scales text across viewports

h1 { font-size: clamp(1.5rem, 2.5vw, 3rem); }

Modern layout

Reflows children without fixed columns

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; }

Aspect ratio

Keeps visuals proportional

.media { aspect-ratio: 16 / 9; }

Media queries

Adjusts styles at viewport breakpoints

@media (min-width: 768px) { .card { padding: 2rem; } }

Container queries

Responds to container width (not viewport)

@container (min-width: 600px) { .card > .meta { display: grid; } }

Common CSS tools for responsive elements

Example 1: Fluid Card Component

CSS
.card {
  box-sizing: border-box;
  width: min(100%, 68ch);         /* fluid but capped for readability */
  margin: 1rem auto;
  padding: clamp(1rem, 2vw, 2rem); /* responsive spacing */
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}
.card img {
  display: block;
  width: 100%;
  height: auto;                  /* flexible media */
  border-radius: 12px 12px 0 0;
}
.card h2 { font-size: clamp(1.25rem, 2vw, 1.75rem); }
.card p  { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; }

The card scales up to 68ch (roughly 68 characters), uses responsive padding, and ensures its image never overflows.

Example 2: Responsive Grid Without Breakpoints

CSS
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}
.gallery > div { background: #f8fafc; padding: 1rem; border-radius: 10px; }

Using auto-fit and minmax, the gallery naturally fills the row with as many columns as fit, collapsing to fewer columns on small screens — no media queries required.

Example 3: Media Queries (Mobile-First)

CSS
.layout { display: grid; gap: 1rem; }
/* Base: single column on small viewports */
.layout { grid-template-columns: 1fr; }
/* Enhance at tablet and up */
@media (min-width: 768px) { .layout { grid-template-columns: 1fr 2fr; } }
/* Desktop and up */
@media (min-width: 1024px) { .layout { grid-template-columns: 1fr 3fr; } }

Start with a simple, accessible single-column layout, then progressively enhance for wider screens.

Example 4: Container Queries (Element-Driven)
Requires browsers with container query support. Wrap the element in a queryable container so it adapts to its parent’s size rather than the viewport.

CSS
.card-wrap { container-type: inline-size; }
.card {
  display: grid;
  grid-template-columns: 1fr;
}
@container (min-width: 520px) {
  .card { grid-template-columns: 2fr 3fr; gap: 1rem; }
}

Now the card switches to a two-column layout only when its container is wide enough, making it portable across different page regions.

Responsive Media & Aspect Ratio

CSS
.media { aspect-ratio: 16 / 9; width: 100%; background: #e2e8f0; }
.media > iframe, .media > img, .media > video { width: 100%; height: 100%; object-fit: cover; }

The aspect-ratio property preserves proportions while object-fit: cover keeps visuals neatly cropped without distortion.

Responsive Typography & Spacing
Use fluid and clamped values for readable, accessible scaling.

CSS
:root { font-size: 100%; }
main { padding-inline: clamp(1rem, 4vw, 3rem); }
h1   { font-size: clamp(1.75rem, 3.5vw, 2.5rem); }
p    { font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.6; }

Images: srcset & sizes (bonus)<br>For <img>, supply multiple resolutions so the browser picks the best fit for the current layout.

HTML
<img
  src="hero-800.jpg"
  srcset="hero-480.jpg 480w, hero-800.jpg 800w, hero-1200.jpg 1200w"
  sizes="(max-width: 600px) 480px, (max-width: 1000px) 800px, 1200px"
  alt="Product hero" />

Performance & Accessibility Tips

  • Prefer mobile-first CSS; add features as space allows.
  • Avoid fixed widths/heights; use fluid constraints (max-width, min(), max(), clamp()).
  • Use box-sizing: border-box; to make sizing more predictable.
  • Respect user preferences: @media (prefers-reduced-motion), (prefers-color-scheme).
  • Test component responsiveness within various container widths, not just the viewport.

Media queries: breakpoint strategy, not trivia

In production, media queries define your breakpoint strategy, user-preference handling, and fallback rules when layouts change across devices. Strong answers talk about mobile-first defaults, pitfalls like overfitting to a few screen widths, and when viewport queries should give way to container queries.

Feature

Example

Purpose

min-width

@media (min-width: 768px)

Applies when the viewport is at least 768px wide.

max-width

@media (max-width: 600px)

Applies when the viewport is 600px wide or less.

orientation

@media (orientation: landscape)

Applies styles for landscape or portrait mode.

resolution

@media (min-resolution: 300dpi)

Targets high-resolution (Retina) displays.

Common media query conditions

Combining Conditions
Media queries can combine multiple conditions using logical operators:

  • and – combine features (@media (min-width: 600px) and (orientation: landscape)).
  • not – exclude specific conditions.
  • only – prevent older browsers from applying the rule.

Advanced Features

  • Media queries support prefers-color-scheme for dark/light mode.
  • prefers-reduced-motion helps accessibility by disabling animations for users who prefer reduced motion.
  • Container queries (in modern browsers) extend this concept to parent element widths rather than the viewport.

Practice next
CSS Grid minmax() card gallery challenge to practice responsive tracks, card minimum width, extra cards, and narrow-width overflow checks. Use the CSS theme variables coding challenge to apply prefers-color-scheme with custom properties and a manual dark-mode override.

Still so complicated?

Think of responsiveness as giving your element elastic edges: it stretches within sensible limits, reflows content when it needs more room, and never breaks its shape.

Summary

  • Make elements fluid with width: 100% + sensible max-width.
  • Keep media flexible (max-width: 100%; aspect-ratio).
  • Use flexbox/grid for natural reflow; minmax() and auto-fit/auto-fill shine.
  • Apply media and container queries to adapt to environment.
  • Adopt fluid typography and spacing with clamp().

Explain the difference between em, rem, %, and px units.IntermediateWhat does display: flex do?IntermediateWhat is the difference between Grid and Flexbox, and when should each be used?Intermediate
Guides
Preparing for interviews?

Use this as one explanation rep, then continue with the CSS interview questions cluster or a guided prep path.

Open frontend interview questionsPractice more CSS interview questionsOpen Essential 60Open Machine Coding HubOpen Question LibraryOpen system design questionsOpen interview preparation guideOpen system design blueprintOpen framework prep pathsOpen Study PlansOpen 7-day crash study planBrowse company questions

Built in public

The code behind FrontendAtlas lives on GitHub. A star helps other frontend engineers find it.

Star on GitHub