From cb9ec0cc391fbb1191ed2a6e351db65939f5bfa3 Mon Sep 17 00:00:00 2001
From: lscambo13 <ls.cambo13@gmail.com>
Date: Fri, 10 Jan 2025 13:18:52 -0800
Subject: [PATCH] Fix: Responsive Design: Part 1 Fixes to portrait cards

---
 Theme/ElegantFin-theme-nightly.css | 56 ++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/Theme/ElegantFin-theme-nightly.css b/Theme/ElegantFin-theme-nightly.css
index a06804d..9964d1e 100644
--- a/Theme/ElegantFin-theme-nightly.css
+++ b/Theme/ElegantFin-theme-nightly.css
@@ -217,28 +217,70 @@ html {
     max-width: 18em;
 }
 
-@media (min-width: 31.25em) {
+/* @media (min-width: 31.25em) {
 
     .portraitCard,
     .smallBackdropCard,
     .squareCard {
         width: 30% !important;
     }
+} */
+
+/* if the window width is equal to or more than (at minimum) 100em then the code in the query will trigger */
+@media (min-width: 120em) {
+
+    .portraitCard,
+    .squareCard {
+        width: 10.4% !important;
+    }
 }
 
-@media (min-width: 43.75em) {
+/* if the window width is equal to or less than (at maximum) 100em then the code in the query will trigger */
+@media (max-width: 120em) {
+
+    .portraitCard,
+    .squareCard {
+        width: 13.2% !important;
+    }
+}
+
+@media (max-width: 100em) {
+
+    .portraitCard,
+    .squareCard {
+        width: 15.2% !important;
+    }
+}
+
+@media (max-width: 60em) {
+
+    .portraitCard,
+    .squareCard {
+        width: 17.7% !important;
+    }
+}
+
+/* @media (max-width: 50em) {
+
+    .portraitCard,
+    .squareCard {
+        width: 17.7% !important;
+    }
+} */
+
+/* @media (max-width: 43.75em) {
 
     .portraitCard,
     .squareCard {
         width: 23% !important;
     }
-}
+} */
 
-@media (min-width: 50em) {
+@media (max-width: 30em) {
 
     .portraitCard,
     .squareCard {
-        width: 23% !important;
+        width: 28.8% !important;
     }
 }
 
@@ -305,8 +347,8 @@ h1 {
 
 .portraitCard {
     min-width: 5em;
-    width: 29.5%;
-    max-width: 12.9em;
+    /* width: 29.5%; */
+    /* max-width: 12.9em; */
 }
 
 .headerHomeButton {