Fix CSS media query

Landscape changes would be applied even if it wasn't displayed on a smaller screen
nfoert · Oct 15, 2024 · 4e56c4d · 4e56c4d
1 parent ca3d508
commit 4e56c4d
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 20 deletions.
diff --git a/cardie/main/templates/index.html b/cardie/main/templates/index.html
@@ -92,22 +92,4 @@
             };
         }
     </script>
-<!-- Script for disable scrollSnap on landscape mode -->
-<script>
-    function disableScrollSnapping() {
-        if (window.matchMedia("(orientation: landscape)").matches) {
-            document.documentElement.style.scrollSnapType = "none";
-            document.documentElement.style.scrollSnapPointsY = "none";
-        } else {
-            document.documentElement.style.scrollSnapType = "y mandatory";
-            document.documentElement.style.scrollSnapPointsY = "repeat(100vh)";
-        }
-    }
-
-    // Call the function once to ensure it runs on load
-    disableScrollSnapping();
-
-    // Re-run the function on orientation change
-    window.addEventListener("orientationchange", disableScrollSnapping);
-    </script>
 {% endblock %}
diff --git a/cardie/static/main/index.css b/cardie/static/main/index.css
@@ -175,7 +175,7 @@ body, html {
 
 }
 
-@media (max-width: 1000px) {
+@media  (max-width: 1000px) {
     /* Small Screens */
 
     #home_card {
@@ -214,7 +214,7 @@ body, html {
 
 /* Properties for landscape mode */
 
-@media only screen and (orientation: landscape) {
+@media (orientation: landscape) and (max-width: 1000px) {
 
     body, html {
         scroll-snap-type: none;