fix: fix theme slider responsiveness

ucsddesignco · Jun 3, 2024 · daa86e8 · daa86e8
1 parent b0709e9
commit daa86e8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 14 deletions.
diff --git a/src/app/components/ThemesSlider/ThemeSlide/ThemeSlide.scss b/src/app/components/ThemesSlider/ThemeSlide/ThemeSlide.scss
@@ -4,10 +4,12 @@
 
   padding: $slide-margin;
   border: none;
+  min-height: 450px;
 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
+  gap: 2rem;
   // max-height: 675px;
   @media (min-width: $desktop-breakpoint) {
     max-height: min(675px, 87%);
@@ -80,13 +82,14 @@
   }
 
   @media (min-width: $mobile-breakpoint) {
+    min-height: 525px;
     padding: $slide-margin;
     border: 1.5px solid $outline-gray;
   }
 
   @media (min-width: $tablet-breakpoint) {
     margin: 0;
-    min-height: auto;
+    min-height: 625px;
     height: 100%;
   }
 }
diff --git a/src/app/components/ThemesSlider/ThemesSlider.scss b/src/app/components/ThemesSlider/ThemesSlider.scss
@@ -16,15 +16,17 @@
     $primary-white 100%
   );
 
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   border: 1.5px solid $outline-gray;
 
+  width: calc(100vw - 2 * $main-padding-mobile-inline);
+
   @media ($mobile-breakpoint < width < $desktop-breakpoint) {
-    padding-block: 2.5rem;
-    height: 550px;
+    padding-top: 2.5rem;
   }
 
-  width: calc(100vw - 2 * $main-padding-mobile-inline);
-
   .keen-slider {
     height: 100%;
   }
@@ -73,13 +75,6 @@
       position: absolute;
       background: $hide-slides-gradient;
     }
-
-    // .arrows {
-    //   display: flex;
-    //   gap: 2px;
-    //   grid-area: 1 / 1 / 2 / 2;
-    //   padding: 10px;
-    // }
   }
 
   @media ($mobile-breakpoint < width < 1400px) {
@@ -97,8 +92,6 @@
   }
 
   @media (min-width: $tablet-breakpoint) {
-    height: 100%;
-
     & {
       width: calc(
         100vw - clamp(250px, 200px + 11vw, 470px) - 2 *