Merge pull request #455 from lufego/bug/442/products-list-enhancment

Products list broken when img-lazy has an error
commercetools · Dec 1, 2017 · f0ce857 · f0ce857
2 parents 816e22b + 5b94332
commit f0ce857
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 6 deletions.
diff --git a/input/assets/css/_general.scss b/input/assets/css/_general.scss
@@ -182,7 +182,7 @@ button {
 }
 
 .img-lazy-error {
-  @include aspect-ratio-in-element(3,4);
+  height: 40vh;
 }
 
 .img-lazy,

diff --git a/input/assets/css/_mixins.scss b/input/assets/css/_mixins.scss
@@ -48,10 +48,6 @@
   }
 }
 
-@mixin aspect-ratio-in-element($width, $height) {
-  padding-top: ($height / $width) * 100%;
-}
-
 @mixin truncate {
   white-space: nowrap;
   overflow: hidden;

diff --git a/input/assets/css/_pop.scss b/input/assets/css/_pop.scss
@@ -55,6 +55,7 @@
 }
 
 #pop-product-list {
+
   @media screen and (min-width: 767px) {
     float: right;
     width: 75%;

diff --git a/input/assets/css/_shop-item.scss b/input/assets/css/_shop-item.scss
@@ -15,14 +15,17 @@
   .pop-product-image {
     position: relative;
     overflow: hidden;
-    margin: 10px;
+    height: 40vh;
 
     > img,
     > picture {
       max-width: 100%;
       left: 0;
       right: 0;
       z-index: 10;
+      max-height: 100%;
+      padding: 10px;
+      margin: auto;
     }
   }