Stop your content from being cut off by phone notches.
CSS safe area insets solve this problem easily.
Today’s smartphones come with notches, rounded corners, and gesture bars.
If you’re not accounting for them, your content risks being clipped or hidden.
Enter CSS safe area insets with env().
They keep your UI visible and out of those unsafe zones.
With just a few lines:
padding-bottom: 48px;
padding-bottom: env(safe-area-inset-bottom);
- Your sticky navbar or bottom buttons stay tap-friendly
- Works automatically on devices with notches, rounded corners, or gesture bars
- Falls back gracefully on devices that don’t need it
The best part? This has a browser support of 96.78%!
To learn more tips about CSS, make sure to join my newsletter below ❤️