How to get safe-padding-inset to work in Foundation 6.7.2
With ZURB’s latest Foundation release of v6.7.2 comes a global settings option to enable safe-padding-inset for devices with notches (iPhones). With a quick tweak to a new variable in _settings.scss, this CSS property can be easily enabled. I activated it in my personal project boilerplate to play with it on my iPhone, only to find it was not rendering correctly.
Rather than an attractive full-width background-image, there was only even more side padding to the body. It was frustrating – I just could not figure out what I was doing wrong. After much head bashing and Googling I realized the issue.
If you want to activate safe-padding-inset on your website, be it with Foundation or any other platform, your <meta viewport> needs to be updated in your <head> accordingly. Be sure the following line is present in the <head> of every page and you’ll be good to go.
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
Related Post
If you’re looking for a new or refreshed website, contact me today and let’s get started.
One thought on “How to get safe-padding-inset to work in Foundation 6.7.2”