Foundation 6.7.2 safe-padding-inset graphic

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">

Thanks for reading!

Leave a Reply