Use pull request #11280 from ncoden/docs/clarify-xy-grid-frame-example for v6.5.0

887b83fbe docs: clarify usage of body overflow in XY Grid grid-frame example

Signed-off-by: Nicolas Coden <nicolas@ncoden.fr>

diff --git a/docs/pages/xy-grid.md b/docs/pages/xy-grid.md
index 4d7b630501a1904e60110420aab5c087e0e0b6eb..5447827483fa92ad2381f1d6944384ab6d9591b8 100644 (file)
--- a/docs/pages/xy-grid.md
+++ b/docs/pages/xy-grid.md
@@ -303,7 +303,7 @@ The XY grid incorporates the grid frame from Foundation for Apps plus many other
 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;}`.
+  Please note that 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;}`. However, take care not to unintentionally hide overflow body content on small screens when using `.medium-grid-frame`.
 </div>
 
 Here's an example of what you can do: