From c7d7d8d0f662778b429416c2192d6b88c272f031 Mon Sep 17 00:00:00 2001
From: Mykola Ptushchuk <mykola.ptushchuk@whykingz.com>
Date: Tue, 22 Oct 2024 10:07:35 +0300
Subject: [PATCH] Add CSS range syntax to breakpoints settings page

---
 templates/docs/settings/breakpoint-settings.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/templates/docs/settings/breakpoint-settings.md b/templates/docs/settings/breakpoint-settings.md
index c5e54a679..d851a8570 100644
--- a/templates/docs/settings/breakpoint-settings.md
+++ b/templates/docs/settings/breakpoint-settings.md
@@ -20,7 +20,7 @@ Vanilla uses three main breakpoints for screen sizes, below you can see the sett
 ## Target small screens
 
 ```css
-@media screen and (max-width: $breakpoint-small - 1) {
+@media screen and (width < $breakpoint-small) {
   // css
 }
 ```
@@ -28,7 +28,7 @@ Vanilla uses three main breakpoints for screen sizes, below you can see the sett
 ## Target medium size screens
 
 ```css
-@media screen and (min-width: $breakpoint-small) and (max-width: $breakpoint-large - 1) {
+@media screen and ($breakpoint-small <= width < $breakpoint-large) {
   // css
 }
 ```
@@ -36,7 +36,7 @@ Vanilla uses three main breakpoints for screen sizes, below you can see the sett
 ## Target large screens
 
 ```css
-@media screen and (min-width: $breakpoint-large) {
+@media screen and ($breakpoint-large <= width) {
   //css
 }
 ```
@@ -44,7 +44,7 @@ Vanilla uses three main breakpoints for screen sizes, below you can see the sett
 ## Target extra large screens
 
 ```css
-@media screen and (min-width: $breakpoint-x-large) {
+@media screen and ($breakpoint-x-large <= width) {
   //css
 }
 ```