How would you debug a layout that looks broken at a specific breakpoint?
Responsive Images and Smooth Font Scaling with CSS Breakpoints
Handling responsive images and typography ensures that both visuals and text adapt gracefully across devices. CSS breakpoints help resize images and adjust font sizes for different screen widths, maintaining clarity and visual balance.
- 1
Use
max-width: 100%andheight: autoto make images scale within their containers. - 2
Apply media queries to change image sizes or switch to alternative images at specific breakpoints.
- 3
Use the HTML
<picture>element orsrcsetfor serving different image resolutions to various devices.
In this example, the image width changes at 768px and 1024px breakpoints to optimize layout and visual hierarchy across screen sizes.
- 1
Use the
clamp()function to define a minimum, preferred (fluid), and maximum font size. - 2
Combine relative units (
vw,em,rem) to make font size responsive to viewport width. - 3
Use media queries for additional fine-tuning between major breakpoints.
Here, clamp() ensures that font sizes grow smoothly between two breakpoints — never shrinking below the minimum or exceeding the maximum. This method provides a natural scaling effect without the need for multiple media queries.
Scenario Questions
0-2 years experience
- 1You have a card component that looks fine on desktop, but at the 768px breakpoint the columns collapse incorrectly. Walk me through how you'd debug the layout.
- 2If a flex container stops wrapping at a certain media query, what steps would you take to identify why.
2-5 years experience
- 1During a feature rollout, a navigation bar breaks its alignment only on tablets (width 600‑800px). How would you investigate and fix it, considering possible CSS specificity and media query ordering issues?
- 2You notice that a grid layout shifts unexpectedly at the 1024px breakpoint after a recent CSS refactor. Explain how you'd pinpoint the cause and decide whether to adjust the breakpoint or the grid definitions.
5-8 years experience
- 1Our product uses a shared design system with dozens of components. A new component's layout breaks at the 1200px breakpoint in some browsers. How would you approach debugging this at scale, ensuring the fix doesn't regress other components?
- 2When optimizing for performance, we want to minimize CSS reflows. A layout glitch appears only at a specific breakpoint; describe how you'd debug it while also evaluating the impact on render performance.
8+ years experience
- 1We are planning to migrate our legacy CSS to a utility‑first framework across multiple teams. Some existing responsive layouts break at certain breakpoints. How would you design a migration strategy that includes debugging and preventing breakpoint regressions?
- 2Our design system needs to support custom breakpoints per product line. A layout issue appears only for one product's breakpoint configuration. How would you architect the CSS (or CSS‑in‑JS) to make debugging such breakpoint‑specific bugs easier and maintainable across teams?
Follow-up Questions
- Which devtools panel do you reach for first and why?
- How do you ensure the fix doesn't introduce regressions in other breakpoints?
- Can you share an example of a breakpoint bug that was hard to reproduce and how you finally caught it?