From bc7760cef5d8d949b1b1e202199b9077559c884c Mon Sep 17 00:00:00 2001
From: Patrick Alvin Alcala <patrick_alv@yahoo.com>
Date: Tue, 16 Sep 2025 10:02:20 +0800
Subject: [PATCH] Fixed viewport display

---
 src/styles/classes.sass | 56 ++++++++++++++++-------------------------
 1 file changed, 22 insertions(+), 34 deletions(-)

diff --git a/src/styles/classes.sass b/src/styles/classes.sass
index 6379690..81228b3 100644
--- a/src/styles/classes.sass
+++ b/src/styles/classes.sass
@@ -11,61 +11,49 @@
   opacity: 1
 
 .on-desktop-only
-  @media only screen and (max-width: view.$desktop)
+  @media only screen and (min-width: 0px) and (max-width: view.$desktop)
+    display: none
+
+  @media only screen and (min-width: view.$desktop)
     display: block
 
-  @media only screen and (max-width: view.$tablet)
-    display: none
-
-  @media only screen and (max-width: view.$mobile)
-    display: none
-
 .on-tablet-only
-  @media only screen and (max-width: view.$desktop)
+  @media only screen and (min-width: 0px) and (max-width: view.$tablet)
     display: none
 
-  @media only screen and (max-width: view.$tablet)
+  @media only screen and (min-width: view.$tablet) and (max-width: view.$desktop)
     display: block
 
-  @media only screen and (max-width: view.$mobile)
+  @media only screen and (min-width: view.$desktop)
     display: none
 
 .on-mobile-only
-  @media only screen and (max-width: view.$desktop)
-    display: none
-
-  @media only screen and (max-width: view.$tablet)
-    display: none
-
-  @media only screen and (max-width: view.$mobile)
+  @media only screen and (min-width: view.$mobile)
     display: block
 
+  @media only screen and (min-width: view.$tablet)
+    display: none
+
 .on-desktop-tablet-only
-  @media only screen and (max-width: view.$desktop)
-    display: block
-
-  @media only screen and (max-width: view.$tablet)
-    display: block
-
-  @media only screen and (max-width: view.$mobile)
+  @media only screen and (min-width: 0px) and (max-width: view.$tablet)
     display: none
 
+  @media only screen and (min-width: view.$tablet)
+    display: block
+
 .on-desktop-mobile-only
-  @media only screen and (max-width: view.$desktop)
+  @media only screen and (min-width: 0px) and (max-width: view.$mobile)
     display: block
 
-  @media only screen and (max-width: view.$tablet)
+  @media only screen and (min-width: view.$mobile) and (max-width: view.$desktop)
     display: none
 
-  @media only screen and (max-width: view.$mobile)
+  @media only screen and (min-width: view.$desktop)
     display: block
 
 .on-tablet-mobile-only
-  @media only screen and (max-width: view.$desktop)
+  @media only screen and (min-width: 0px) and (max-width: view.$desktop)
+    display: block
+
+  @media only screen and (min-width: view.$desktop)
     display: none
-
-  @media only screen and (max-width: view.$tablet)
-    display: block
-
-  @media only screen and (max-width: view.$mobile)
-    display: block