fix: responsive product list css (#7928)

openfoodfacts · Jan 5, 2023 · b7e8912 · b7e8912
1 parent ab6d247
commit b7e8912
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 64 deletions.
diff --git a/scss/_off.scss b/scss/_off.scss
@@ -813,54 +813,6 @@ html[dir="rtl"] {
   background-color: #aaf;
 }
 
-// Horizontally and vertically center images
-.list_product_img_div {
-  height: 100px;
-  text-align: center;
-  line-height: 100px;
-}
-
-.list_product_img {
-  height: auto;
-  display: inline-block;
-  vertical-align: middle;
-}
-
-.list_product_name {
-  margin-top: 0.2rem;
-  line-height: 20px;
-}
-
-.list_product_icons {
-  height: 24px;
-  margin-right: 0.2rem;
-  margin-top: 0.2rem;
-}
-
-// For small screen, cards take the full width, move the image to the left
-@media #{$small-only} {
-  .list_product_img_div {
-    width: 100px;
-    float: left;
-    margin-right: 1em;
-  }
-  .list_product_a {
-    min-height: 120px;
-  }
-  .list_product_icons {
-    height: 36px;
-  }
-}
-
-// For medium screen, force the height of the product name so that icons
-// below are vertically aligned with other cards on the same line
-@media #{$medium-up} {
-  .list_product_name {
-    height: 80px;
-    overflow: hidden;
-  }
-}
-
 .tabs a:focus {
   outline: none;
 }

diff --git a/scss/_product-list.scss b/scss/_product-list.scss
@@ -103,6 +103,10 @@ $productsGutter:12;
     font-size: 14px;
     color: $black;
     display: inline-flex;
+    // Force the height of the product name so that icons
+    // below are vertically aligned with other cards on the same line
+    height:82px;
+    overflow: hidden;
 }
 
 .list_product_icons {
@@ -111,23 +115,7 @@ $productsGutter:12;
     margin-top: 0.2rem;
 }
 
-// For small screen, cards take the full width, move the image to the left
-@media #{$small-only} {
-    .list_product_img_div {
-        width: 100px;
-        float: left;
-        margin-right: 1em;
-    }
-    .list_product_a {
-        min-height: 120px;
-    }
-    .list_product_icons {
-        height: 36px;
-    }
-}
 
-// For medium screen, force the height of the product name so that icons
-// below are vertically aligned with other cards on the same line
 @media #{$medium-up} {
     .list_product_name {
         overflow: hidden;