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:
None of which has worked out for me. What can be done to remove that extra white-space?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments