gui: Remove hard-coded heights from carousel

decred · May 13, 2020 · 2f2388f · 2f2388f
1 parent 56b745d
commit 2f2388f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 14 deletions.
diff --git a/gui/assets/public/css/dcrpool.css b/gui/assets/public/css/dcrpool.css
@@ -7573,30 +7573,34 @@ h2 {
   width: 100%;
 
 }
+
+.main-carousel__image-container {
+  background-color: #091440;
+  height: 170px;
+}
+
+@media (min-width: 768px) {
   .main-carousel__image-container {
-    background-color: #091440;
-    min-height: 170px; }
-    @media (min-width: 768px) {
-      .main-carousel__image-container {
-        min-height: 190px; } }
-        @media (min-width: 992px) {
-          .main-carousel__image-container {
-            min-height: 300px; } }
+    height: 190px; }
+}
+
+@media (min-width: 992px) {
+  .main-carousel__image-container {
+    height: 300px; }
+}
+
     .main-carousel__image-container img {
       -o-object-fit: cover;
          object-fit: cover; }
   .main-carousel .carousel-cell {
     width: 100%;
-    height: 300px;
     margin-right: 20px; }
     @media (max-width: 991.98px) {
       .main-carousel .carousel-cell {
-        height: 500px;
         background-color: #fff;
        } }
     @media (max-width: 767.98px) {
       .main-carousel .carousel-cell {
-        height: 580px;        
       font-size: 15px; } }
   .main-carousel .flickity-page-dots {
     left: 22%;

diff --git a/gui/assets/templates/index.html b/gui/assets/templates/index.html
@@ -53,7 +53,7 @@ <h1>Mining Pool Overview</h1>
         <div class="col-12">
             <div class="main-carousel">
                 <div class="carousel-cell">
-                    <div class="row m-0">
+                    <div class="row m-0 h-100">
                         <div class="col-lg-4 col-12 main-carousel__image-container text-center">
                             <div class="carousel-image" style="background-image:url('/assets/images/carousel_1.svg');">
                             </div>
@@ -78,7 +78,7 @@ <h2>Identify the Miner</h2>
                     </div>
                 </div>
                 <div class="carousel-cell">
-                    <div class="row m-0">
+                    <div class="row m-0 h-100">
                         <div class="col-lg-4 col-12 main-carousel__image-container text-center">
                             <div class="carousel-image" style="background-image:url('/assets/images/carousel_2.svg');">
                             </div>
@@ -112,7 +112,7 @@ <h2>Connect the Miner</h2>
                     </div>
                 </div>
                 <div class="carousel-cell">
-                    <div class="row m-0">
+                    <div class="row m-0 h-100">
                         <div class="col-lg-4 col-12 main-carousel__image-container text-center">
                             <div class="carousel-image" style="background-image:url('/assets/images/carousel_3.svg');">
                             </div>