How would you optimize breakpoints for tablets vs. phones?

0-2 years experience

1. 1We have a simple landing page that looks good on phones, but on a 10‑inch tablet the two‑column layout collapses to a single column. How would you adjust the CSS breakpoints to fix this?
2. 2If you set a media query at max-width: 768px, which devices will it affect, and what would you change to target tablets without impacting phones?
3. 3You need to hide a sidebar on phones but show it on tablets. Which breakpoint would you choose and why?

2-5 years experience

1. 1Our product page uses a breakpoint at 600px for the mobile layout, but on some Android tablets the layout still looks cramped. Walk me through how you'd debug and refine the breakpoint strategy.
2. 2We want to introduce a new three‑column grid that appears on tablets but falls back to two columns on phones. What trade‑offs would you consider when choosing the breakpoint values and how would you implement them?
3. 3A colleague added a media query using device-width instead of width, causing inconsistent behavior across tablets. Explain why this happened and how you'd correct it.

5-8 years experience

1. 1Our design system defines breakpoints globally, but different product teams have diverging needs for tablet vs phone layouts. How would you design a scalable breakpoint strategy that balances consistency and flexibility?
2. 2We’re seeing performance regressions because many CSS files contain overlapping media queries for tablets and phones. What refactoring approach would you take to optimize the CSS bundle and maintainability?
3. 3When supporting high‑resolution tablets, we need to consider both viewport width and pixel density. How would you incorporate DPR considerations into breakpoint decisions without bloating the stylesheet?

8+ years experience

1. 1Our company is migrating from a legacy CSS framework to a modern utility‑first system. How would you plan the transition of breakpoint definitions for tablets and phones to ensure cross‑team consistency and minimal disruption?
2. 2We have multiple international teams building features that each add custom breakpoints for tablets. What governance model and tooling would you propose to keep breakpoint usage coherent across the organization?
3. 3Looking ahead, how would you future‑proof our breakpoint strategy to accommodate emerging device form factors like foldables while keeping the CSS maintainable at scale?