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%!
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!