Clarify media query using .02px and bump from callout to warning

diff --git a/site/content/docs/4.3/layout/breakpoints.md b/site/content/docs/4.3/layout/breakpoints.md
index 2a9ae880da5db21daad4fc69fde5c9121426d833..d33a2eda295f3156cfd039790d4663a8a209a9b3 100644 (file)
--- a/site/content/docs/4.3/layout/breakpoints.md
+++ b/site/content/docs/4.3/layout/breakpoints.md
@@ -173,7 +173,7 @@ These mixins take those declared breakpoints, subtract `.02px` from them, and us
 // No media query since the xxl breakpoint has no upper bound on its width
 {{< /highlight >}}
 
-{{< callout info >}}
+{{< callout warning >}}
 {{< partial "callout-info-mediaqueries-breakpoints.md" >}}
 {{< /callout >}}
 

diff --git a/site/layouts/partials/callout-info-mediaqueries-breakpoints.md b/site/layouts/partials/callout-info-mediaqueries-breakpoints.md
index e3660e462aabac1ad29b2d910794e2d29f4c33ec..2eea77138b03528f305ecd26518e4cae2452c4bc 100644 (file)
--- a/site/layouts/partials/callout-info-mediaqueries-breakpoints.md
+++ b/site/layouts/partials/callout-info-mediaqueries-breakpoints.md
@@ -1 +1 @@
-Note that since browsers do not currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision for these comparisons.
+**Why subtract .02px?** Browsers don't currently support [range context queries](https://www.w3.org/TR/mediaqueries-4/#range-context), so we work around the limitations of [`min-` and `max-` prefixes](https://www.w3.org/TR/mediaqueries-4/#mq-min-max) and viewports with fractional widths (which can occur under certain conditions on high-dpi devices, for instance) by using values with higher precision.