Apply "padding: env()" to the whole body except a special class

Question

I would like to optimize my website for the iPhone X (and above). By default, there is a safearea that I want to change.

Everything on my website should have this safearea, so I gave the whole body

padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);

But I got some fullscreen background images I don't want this padding to apply to. padding: 0; doesn't work.

How do I "negate" this padding for my background images? I also tried it with

body:not (.background) { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}

but it also didn't work.

I attach a fiddle so you can see what the structure of my code is. Only problem is: you will only see this on an iPhone X or above, not in the devtools.

Thank you very much. If you need further information, please let me know.

Check out this article: https://stackoverflow.com/questions/16201948/how-to-exclude-particular-class-name-in-css-selector or this JSFiddle: http://jsfiddle.net/geatR/1/ Let me know if those work — Calvin Bonner, Apr 28 '20 at 13:38
Thank you, but this doesn't work for me. As soon as I apply "padding: env();" to the body I can't "revert" it for my class inside the body. That's why I'am looking for something to override this padding. — jona, Apr 28 '20 at 14:11

score 0 · Answer 1 · answered Apr 28 '20 at 13:57

I think I understand what your asking, if so, this should fix your issue.

Put a div inside the HTML of your document that sits directly inside the body tag:

<body>
   <div id="body-content">
      <!-- The content of your page will all go here -->
   </div>
</body>

And then for you padding, just apply it to your content div:

#body-content {
   padding: env(safe-area-inset-top)
      env(safe-area-inset-right)
      env(safe-area-inset-bottom)
      env(safe-area-inset-left);
}

This should allow the background of your body to reach the edges of the screen while your content is still optimized for mobile screens.

Thank you. The only problem is, that I want to do this in combination with wordpress and I can't (and don't want to) set up classes for every of my content elements, because it's dynamic. I thought it would be easier to exclude just some background image divs. — jona, Apr 28 '20 at 14:09

Apply "padding: env()" to the whole body except a special class

1 Answers1