How to Fix Bottom Padding for iOS Mobile Browsers

Last modified
August 30, 2020
Time to read
1 min read

Photo by Andisheh A

Table of Contents

Problem

Note

This article assumes an iOS device. But I'd be curious to know if you're on Android and get the same issue.

Let's say your design has a bottom navbar on mobile-sized screens.

Something like this:

View on mobile after scrolling up before applying fix.

This looks fine.

However, when we start scrolling down, the mobile browser's bottom menu goes away making our navbar tuck under the device's home-slider at the bottom.

View on mobile after scrolling down before applying fix.

We don't want that.

Luckily, the fix is simple.

Solution

We'll add the following utility class:

/* This adds extra bottom padding on mobile browsers */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom);
}

Read more about env() on MDN.

Next, we'll apply the class to our navigation menu.

<!-- Assume this is where your nav menu is -->
<header class="safe-bottom">
  <!-- More stuff would likely go here -->
</header>

In our HTML document's head, we also need to set the following:

<!-- Put this in your document `head` -->
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, viewport-fit=cover"
/>

Now, when we scroll up, the navbar looks unchanged.

View on mobile after scrolling up after applying fix.

But when we scroll down, we get a little extra padding to make way for the home slider.

View on mobile after scrolling down after applying fix.

That's all there is to it!

Hope this helps you build a better mobile experience for your users.

Let me know on Twitter if you want me to do more content like this.

Last modified
August 30, 2020
Time to read
1 min read

Get the latest articles
Sign up for the newsletter

I will not send you spam. Unsubscribe at any time.

Was this helpful?