From a2f92d1aab591c57c6f50905d3cfed587efe914e Mon Sep 17 00:00:00 2001 From: Sean Hinton <339521+seanhinton@users.noreply.github.com> Date: Tue, 3 Aug 2021 17:08:10 +0100 Subject: [PATCH] Improved docs describing media-breakpoint-down breakpoints (#34637) Co-authored-by: XhmikosR --- site/content/docs/5.0/layout/breakpoints.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/site/content/docs/5.0/layout/breakpoints.md b/site/content/docs/5.0/layout/breakpoints.md index ce1df6bb76..f977edd52b 100644 --- a/site/content/docs/5.0/layout/breakpoints.md +++ b/site/content/docs/5.0/layout/breakpoints.md @@ -145,23 +145,23 @@ We occasionally use media queries that go in the other direction (the given scre These mixins take those declared breakpoints, subtract `.02px` from them, and use them as our `max-width` values. For example: ```scss -// X-Small devices (portrait phones, less than 576px) +// `xs` returns only a ruleset and no media query +// ... { ... } + +// `sm` applies to x-small devices (portrait phones, less than 576px) @media (max-width: 575.98px) { ... } -// Small devices (landscape phones, less than 768px) +// `md` applies to small devices (landscape phones, less than 768px) @media (max-width: 767.98px) { ... } -// Medium devices (tablets, less than 992px) +// `lg` applies to medium devices (tablets, less than 992px) @media (max-width: 991.98px) { ... } -// Large devices (desktops, less than 1200px) +// `xl` applies to large devices (desktops, less than 1200px) @media (max-width: 1199.98px) { ... } -// X-Large devices (large desktops, less than 1400px) +// `xxl` applies to x-large devices (large desktops, less than 1400px) @media (max-width: 1399.98px) { ... } - -// XX-Large devices (larger desktops) -// No media query since the xxl breakpoint has no upper bound on its width ``` {{< callout warning >}}