Aditya J Gupta Aditya J Gupta - 1 month ago 15
CSS Question

How to remove extra whitespace around body from Zurb Foundation

I'm using the Foundation framework for my website and there's an extra white-space around the the whole body (the gutter). To remove the gutter I've tried:


  1. *{margin:0;padding:0;}

  2. body{margin:0;padding:0;}

  3. Downloading custom Foundation with gutter set to 0



None of which has worked out for me. What can be done to remove that extra white-space?

Here's the screenshot with gutter highlighted with red

Answer

This is most likely not a margin issue but a max-width issue. Using DevTools you'll probably find that your .row class has a max-width of 62.5rem, which I think is standard. (I work on a site that has a modified width of 72.5rem.)

I think it's a good idea to maintain some version of this limitation if you have normal page content that people will have to actually read on large screens. But you can safely override it where you want 100% width.

You can do so by adding a class that overrides the default max-width and selects the relevant element with sufficient specificity in your style sheet.

Alternatively, you can refrain from using class .row on outer containers that you want to span the page. This allows you the option of putting rows within. This way you could, for example, have your teal background span the page but keep the content constrained and aligned with normal grid-based content below.

You can read more about the Foundation grid here, including how to customize row width via SASS variables if you're into that sort of thing.