antislop-layoutmobile

Define a real mobile state at the breakpoint where content stops working: collapse multi-column grids into a single stacked column, reduce type and padding to a mobile scale, and verify the whole layout at a narrow viewport width rather than patching individual symptoms.

Find the element wider than the viewport, such as a table, code block, or fixed-width child, then contain or reflow it. Use max-width: 100% on images, wrapping for code, and relative units with min-width: 0 on grid children so nothing overflows.

Interactive targets should be at least 44 x 44 px, achieved through padding or a larger hit box even when the visual element is smaller. Adjacent targets also need clear spacing so a thumb tap does not hit the wrong control.

No. Breakpoints should be placed where the content actually breaks, not matched to specific phone models. Narrow the viewport, watch where the layout stops holding, and set the breakpoint there so the design follows content rather than a device list.

On mobile browsers, 100vh includes browser chrome, so full-viewport sections overflow the visible area and push content below the fold. Let sections size to their content with auto, or use the dynamic viewport unit dvh when a full-height section is intended.