The 375px Breakpoint: Where most mobile bugs hide
Most developers build on large desktop monitors and test by resizing their browser window casually. But standard smartphones (like the iPhone SE, iPhone 13 mini, and budget Android devices) have viewport widths between 320px and 375px.
At 375px, three-column feature cards or side-by-side buttons collide, causing text to truncate or stack awkwardly over other page elements.
- Use CSS `flex-wrap: wrap` on button groups so they stack cleanly on narrow screens.
- Ensure comparison tables have `overflow-x: auto` so the table scrolls without breaking page width.
- Avoid hardcoded heights like `height: 400px` on containers with dynamic text.
Thumb traps and tiny tap targets
On mobile, visitors navigate with their thumbs, not precision mouse cursors. If your mobile menu close icon (`X`) or dropdown arrows are only 16px wide, users will repeatedly mis-tap, causing frustration and immediate bounces.
Apple and Google recommend an interactive hit area of at least 44px by 44px. Even if the visible icon is small, add transparent padding around it so it is easy to tap.
Sticky headers that cover form inputs
A fixed navigation bar that looks sleek on desktop can take up 30% of a mobile screen. When the mobile virtual keyboard pops up, the remaining visible screen space shrinks drastically, often trapping the active text input under the sticky navbar.
Test your sign-up and contact forms with virtual keyboards open, ensuring input fields scroll comfortably into the center of the viewport.