Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of .media-width() mixin defined anywhere in project but invoked in one place in lib/web/css/source/lib/_responsive.less. That's why in the resulting styles.css we have every media query only once with all the rules there, not a multiple calls for the same query.
+
Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of .media-width() mixin defined anywhere in project but invoked in one place in lib/web/css/source/lib/_responsive.less. That's why in the resulting styles.css we have every media query only once with all the rules there, not a multiple calls for the same query.
To see the media queries work resize window to understand which breakpoint is applied.
Responsive mixins usage
For grouping style rules in certain media queries .media-width() mixin used.
.media-width(<@extremum>, <@break>);
-
@extremum: max|min - sets whether to use min-width or max-width in media query condition
- @break: value - sets the value of breakpoint to compare with in media query condition.
+
@extremum: max|min - sets whether to use min-width or max-width in media query condition
+ @break: value - sets the value of breakpoint to compare with in media query condition.
For example
.media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
your styles
diff --git a/lib/web/css/docs/source/_layout.less b/lib/web/css/docs/source/_layout.less
index 09fd183e30ba0..8c1c707ff358c 100644
--- a/lib/web/css/docs/source/_layout.less
+++ b/lib/web/css/docs/source/_layout.less
@@ -57,25 +57,25 @@ footer.footer {
//
Class name for three columns layout with left sidebar
//
//
diff --git a/lib/web/css/docs/source/_responsive.less b/lib/web/css/docs/source/_responsive.less
index 8e7397d6ad6f3..dca60791bfacf 100644
--- a/lib/web/css/docs/source/_responsive.less
+++ b/lib/web/css/docs/source/_responsive.less
@@ -4,7 +4,7 @@
// */
// # Responsive
-// Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of .media-width() mixin defined anywhere in project but invoked in one place in lib/web/css/source/lib/_responsive.less. That's why in the resulting styles.css we have every media query only once with all the rules there, not a multiple calls for the same query.
+// Magento UI library provides a strong approach for working with media queries. It`s based on recursive call of .media-width() mixin defined anywhere in project but invoked in one place in lib/web/css/source/lib/_responsive.less. That's why in the resulting styles.css we have every media query only once with all the rules there, not a multiple calls for the same query.
//
// To see the media queries work resize window to understand which breakpoint is applied.
// ```
@@ -43,8 +43,8 @@
// ```css
// .media-width(<@extremum>, <@break>);
// ```
-// @extremum: max|min - sets whether to use **min-width** or **max-width** in media query condition
-// @break: value - sets the value of breakpoint to compare with in media query condition.
+// @extremum: max|min - sets whether to use **min-width** or **max-width** in media query condition
+// @break: value - sets the value of breakpoint to compare with in media query condition.
// For example
// ```css
// .media-width(@extremum, @break) when (@extremum = 'max') and (@break = @screen__s) {
diff --git a/lib/web/css/docs/source/_variables.less b/lib/web/css/docs/source/_variables.less
index e1845786067c8..74cbabdd07378 100644
--- a/lib/web/css/docs/source/_variables.less
+++ b/lib/web/css/docs/source/_variables.less
@@ -4169,25 +4169,25 @@
//