HTML & CSS Interview Question #149

What should a senior developer review when a page looks correct on desktop but breaks on mobile?

Advanced CSS, Accessibility, Performance, Debugging & Senior Scenarios Senior Advanced

Quick Interview Answer

First verify the viewport configuration and reproduce the problem at the failing width. Inspect actual element sizes, grid and flex tracks, intrinsic content widths, media queries, images, tables, code blocks, fixed positioning, and any component with a hard-coded width.

Detailed Explanation

First verify the viewport configuration and reproduce the problem at the failing width. Inspect actual element sizes, grid and flex tracks, intrinsic content widths, media queries, images, tables, code blocks, fixed positioning, and any component with a hard-coded width.

Check whether the design relies on hover, whether touch targets and text remain usable, and whether navigation can wrap or collapse appropriately. For overflow, identify the exact element rather than applying overflow-x: hidden to the whole page as a first response.

A senior developer should also test intermediate widths, zoom, long real-world content, keyboard focus, and orientation changes. The fix should make the component intrinsically resilient instead of targeting one screenshot or one phone model.

Code Example

/* Typical resilient foundations */
*,
*::before,
*::after {
    box-sizing: border-box;
}

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

.content {
    min-width: 0;
}

.code-block {
    max-width: 100%;
    overflow-x: auto;
}

@media (max-width: 48rem) {
    .two-column {
        grid-template-columns: 1fr;
    }
}