From 6f1489e40e264bdadb4e9fb40b1409cd2ffe9297 Mon Sep 17 00:00:00 2001
From: Brett Mason <brettsmason@gmail.com>
Date: Mon, 24 Jul 2017 19:08:03 +0100
Subject: [PATCH] Add note to docs about hiding the overflow on body.

---
 docs/pages/xy-grid.md | 4 ++++
 1 file changed, 4 insertions(+)

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