docs: add a notice about required CSS in Media Query doc

Partially resolve https://github.com/zurb/foundation-sites/issues/11374

diff --git a/docs/pages/media-queries.md b/docs/pages/media-queries.md
index ad2767f9be9d9fee6e8112f23e288d5c993abf6c..43917d315d6441e8cc17473e41b95f518dfac45a 100644 (file)
--- a/docs/pages/media-queries.md
+++ b/docs/pages/media-queries.md
@@ -187,6 +187,10 @@ This can be used to combine multiple media queries together.
 
 The Foundation JavaScript includes a set of helper functions for working with media queries. They're all on the `Foundation.MediaQuery` object.
 
+<div class="callout warning">
+  The MediaQuery utility uses the Sass breakpoints settings and require the Foundation CSS to be imported. For Sass users, you need to include either `foundation-everything()` or `foundation-global-styles()`.
+</div>
+
 Get the name of the current breakpoint with `MediaQuery.current`.
 
 ```js