Responsive and CSS Design Questions

Focuses on building adaptable, maintainable user interfaces across devices and screen sizes using CSS and responsive design principles. Topics include mobile first and adaptive strategies, media queries, fluid and relative units, responsive images and picture sources, layout techniques using Flexbox and CSS Grid, responsive typography and spacing, component breakpoints and adaptive components, writing efficient and maintainable styles with methodologies like BEM or CSS in JS, CSS custom properties for theming, handling interactive states and accessible focus styles, performance considerations for layout and animations, and how responsive work intersects with accessibility (touch targets, readable text, focus management). Candidates should be ready to explain implementation details, trade offs, and examples of responsive patterns they used.

MediumTechnical

36 practiced

Problem-solving: A responsive component's spacing and typography look good in Figma, but when implemented the vertical rhythm breaks between 375px and 412px viewports. Describe a systematic debugging approach to identify the root cause and steps to resolve it while keeping communication clear with engineers.

HardTechnical

36 practiced

As a lead UI Designer responsible for multiple product teams, describe how you would balance visual fidelity (pixel-perfect responsive layouts) against implementation complexity and engineering velocity. Provide a framework for decisions (criteria, stakeholders, examples) and how you'd communicate trade-offs to designers and engineers.

MediumTechnical

46 practiced

Implement a responsive layout in CSS where a two-column card list becomes a single column on screens narrower than 720px. Use Flexbox only and ensure each card maintains equal height and consistent gap spacing. Provide the CSS and explain your choices (mobile-first).

Sample Answer

**Approach (mobile‑first)**- Default to a single column for narrow screens.- Use Flexbox gap for consistent spacing and align-items: stretch so cards match height.- At >=720px switch to a two‑column grid using wrapping and a computed basis so gaps stay consistent.- Keep each card as a column flex container so internal content can space vertically.

CSS

css

:root {
  --gap: 16px;
}

/* Container: mobile-first single column */
.card-list {
  display: flex;
  flex-direction: column; /* single column */
  gap: var(--gap);
  align-items: stretch;   /* ensure children stretch to same width/height constraints */
}

/* Card: allow internal layout and equal heights */
.card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  flex: 0 1 auto; /* natural height on mobile */
}

/* Two-column layout on wider screens */
@media (min-width: 720px) {
  .card-list {
    flex-direction: row;
    flex-wrap: wrap;
    /* children will form two columns; calculate basis subtracting half the gap */
  }

  .card {
    flex: 0 1 calc(50% - (var(--gap) / 2));
  }
}

Reasoning & details- Mobile-first: simpler base styles and progressive enhancement at 720px.- gap handles consistent spacing without margin hacks.- align-items: stretch + card as a column flex ensures consistent heights across a row and predictable inner alignment (header/content/footer).- Using calc(50% - gap/2) keeps two columns precisely spaced even when gap changes.

HardTechnical

39 practiced

Describe how you'd design an adaptive navigation component that transforms from a persistent top bar on desktop to a bottom-sheet or drawer on mobile. Include breakpoints, interaction patterns, accessibility concerns (announcements, focus), and how you'd prototype and hand off interactions to engineers.

MediumTechnical

44 practiced

Scenario-based: A designer and developer disagree about whether to implement a card layout with CSS Grid or Flexbox because of nested complexity and the need for reordering at certain breakpoints. As the UI Designer, how would you mediate the decision, what evidence would you collect, and what compromise or prototype would you propose?

Unlock Full Question Bank

Get access to hundreds of Responsive and CSS Design interview questions and detailed answers.

Join thousands of developers preparing for their dream job.