trying out orientation media queries

ZainGS · Apr 13, 2024 · e04956d · e04956d
1 parent 56d58e1
commit e04956d
Showing 1 changed file with 19 additions and 12 deletions.
diff --git a/ClientApp/src/app/home/home.component.scss b/ClientApp/src/app/home/home.component.scss
@@ -1135,26 +1135,33 @@ sub-title-container-mobile {
   }
 }
 
-/* Base styles - hide mobile-container by default */
+/* Base styles - assume landscape by default */
 .mobile-container {
-display: none;
+  display: none; /* Hide mobile-container by default */
 }
 
 .desktop-container {
-display: block; /* Show desktop container by default */
+  display: block; /* Show desktop container by default */
 }
 
-/* Media Query for when the height is greater than the width */
-@media (max-aspect-ratio: 1/1.05) {
-.mobile-container {
-display: block; /* Show mobile container when width < height */
-}
+/* Media Query for devices in portrait orientation */
+@media (orientation: portrait) {
+  .mobile-container {
+    display: block; /* Show mobile container in portrait mode */
+  }
 
-.desktop-container {
-display: none; /* Hide desktop container when width < height */
+  .desktop-container {
+    display: none; /* Hide desktop container in portrait mode */
+  }
 }
 
-  .candycon-slogan {
-      display: none;
+/* Media Query for devices in landscape orientation */
+@media (orientation: landscape) {
+  .mobile-container {
+    display: none; /* Hide mobile container in landscape mode */
+  }
+
+  .desktop-container {
+    display: block; /* Show desktop container in landscape mode */
   }
 }