From: Brett Mason <brettsmason@gmail.com>
Date: Mon, 24 Jul 2017 18:08:03 +0000 (+0100)
Subject: Add note to docs about hiding the overflow on body.
X-Git-Tag: v6.4.2-rc2~1^2~4^2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=refs%2Fpull%2F10448%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Add note to docs about hiding the overflow on body.
---

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index 399bbb4f5..f1cf9ccb1 100644
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -283,6 +283,10 @@ You can also apply margin or padding with `.grid-margin-y` and `.grid-padding-y`
 The XY grid incorporates the grid frame from Foundation for Apps plus many other useful features.
 To start, add `.grid-frame` to the grid. This sets the grid to be 100vh (the full height of the browser window).
 
+<div class="callout warning">
+  Please note to use `.grid-margin-x` or `.grid-margin-y` with `.grid-frame` you need to hide the overflow on the body like so: `body {overflow: hidden;}`.
+</div>
+
 Here's an example of what you can do:
 <div class="docs-codepen-container">
 <a class="codepen-logo-link" href="https://codepen.io/ZURBFoundation/pen/MogrXG?editors=1000" target="_blank"><img src="{{root}}assets/img/logos/edit-in-browser.svg" class="" height="" width="" alt="edit on codepen button"></a>