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.

HardTechnical

47 practiced

Propose a practical implementation for a responsive image gallery that must display 200 thumbnails per page while preserving layout stability and performance. Requirements:- Serve breakpoint-specific crops using <picture> and srcset.- Lazy-load thumbnails but reserve layout space to avoid CLS.- Support a lightbox preview without causing layout shifts.Describe HTML/CSS patterns, lazy-loading strategy (IntersectionObserver), placeholder techniques (LQIP or blurred SVG), and CDN/image-pipeline integration for format and size variants.

EasyTechnical

39 practiced

Explain the difference between box-sizing: content-box and box-sizing: border-box. Provide a short example showing how width, padding, and border affect total element size in each mode, and explain why many teams apply a global rule like:

* { box-sizing: border-box; }

for responsive layouts and predictable sizing.

MediumTechnical

39 practiced

You work on a CMS-driven site where editors upload images with arbitrary aspect ratios. Propose a scalable solution for delivering responsive images and correct art direction: include how you would store focal points or crop variants, generate responsive sizes/formats, expose options in the CMS UI for editors, and how the front-end should select and render these resources. Discuss CDN integration and performance trade-offs.

HardTechnical

48 practiced

Discuss edge cases that affect responsive layouts: high device-pixel-ratio (retina) displays, browser zoom, and mobile dynamic viewports where browser chrome shows/hides (changing available viewport height). For each case explain potential layout and touch-target impacts, detection or mitigation strategies (CSS and JS), and testing approaches to catch these issues across devices.

MediumTechnical

36 practiced

Explain performance trade-offs when implementing CSS animations and transitions in responsive UIs. Which properties are compositor-friendly and safe to animate (e.g., transform, opacity), and which cause layout/reflow (e.g., width, height, top/left)? Discuss will-change usage, layering strategy, GPU memory considerations, and common pitfalls like creating too many compositing layers.

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.