From 75af8680f982715b921aec94f4edc68ffca332bb Mon Sep 17 00:00:00 2001
From: Warren Rodrigues <hello@warrenrodrigues.com>
Date: Wed, 24 Mar 2021 19:59:25 +0530
Subject: [PATCH] Fix breakpoint issue and incorrect min-width size

---
 sass/components/_global.scss     | 4 ++--
 sass/components/_typography.scss | 4 ++--
 sass/components/_variables.scss  | 6 +++---
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/sass/components/_global.scss b/sass/components/_global.scss
index f83b93928d..fe38cf026b 100644
--- a/sass/components/_global.scss
+++ b/sass/components/_global.scss
@@ -322,7 +322,7 @@ ul.staggered-list li {
   }
 }
 .hide-on-med-only {
-  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+  @media only screen and (min-width: $small-screen-up) and (max-width: $medium-screen) {
     display: none !important;
   }
 }
@@ -347,7 +347,7 @@ ul.staggered-list li {
   }
 }
 .show-on-medium {
-  @media only screen and (min-width: $small-screen) and (max-width: $medium-screen) {
+  @media only screen and (min-width: $small-screen-up) and (max-width: $medium-screen) {
     display: block !important;
   }
 }
diff --git a/sass/components/_typography.scss b/sass/components/_typography.scss
index b9b93b3ec8..44bff4caeb 100644
--- a/sass/components/_typography.scss
+++ b/sass/components/_typography.scss
@@ -10,11 +10,11 @@ html{
     font-size: 14px;
   }
 
-  @media only screen and (min-width: $medium-screen) {
+  @media only screen and (min-width: $medium-screen-up) {
     font-size: 14.5px;
   }
 
-  @media only screen and (min-width: $large-screen) {
+  @media only screen and (min-width: $large-screen-up) {
     font-size: 15px;
   }
 
diff --git a/sass/components/_variables.scss b/sass/components/_variables.scss
index 4c59c12785..69987541c6 100644
--- a/sass/components/_variables.scss
+++ b/sass/components/_variables.scss
@@ -218,9 +218,9 @@ $switch-radius: 15px !default;
 $small-screen-up: 601px !default;
 $medium-screen-up: 993px !default;
 $large-screen-up: 1201px !default;
-$small-screen: 600px !default;
-$medium-screen: 992px !default;
-$large-screen: 1200px !default;
+$small-screen: 600.99px !default;
+$medium-screen: 992.99px !default;
+$large-screen: 1200.99px !default;
 
 $medium-and-up: "only screen and (min-width : #{$small-screen-up})" !default;
 $large-and-up: "only screen and (min-width : #{$medium-screen-up})" !default;