Small Mobile Devices (max-width: 480px)

Targeting Small Mobile Screens

While mobile-first design starts without media queries, some layouts need special treatment on the very smallest screens (under 480px). These devices include older phones and compact Android handsets.

The Query

@media screen and (max-width: 480px) {
  /* Small phone styles */
}

When to Use max-width

In a mobile-first workflow, max-width is typically used sparingly. It is useful when:

• A component works fine at 375px+ but breaks at 320px
• You need to increase tap target sizes for very narrow screens
• Font sizes or padding need to be reduced to prevent overflow
• Navigation needs to collapse even further

Practical Example

/* Base: simple card */
.card { padding: 1rem; font-size: 1rem; }

@media (max-width: 480px) {
  .card { padding: 0.75rem; font-size: 0.875rem; }
  .card-title { font-size: 1.1rem; }
  .btn { width: 100%; min-height: 48px; }
}

A Word of Caution

Avoid creating too many narrow breakpoints. Most modern phones are 360px-414px wide, so the 480px threshold covers edge cases without over-engineering. Test on real devices when possible.