fixed display of products

src/app/components/product-item/product-item.component.scss

@@ -1,8 +1,7 @@
 .product-card {
     display: flex;
     flex-direction: column;
-    //width: 21%;
-    //height: 45%;
+    height: 95%;
     margin: 10%;
     box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2),0px 1px 1px 0px rgba(0, 0, 0, 0.14),0px 1px 3px 0px rgba(0, 0, 0, 0.12);
     transition: box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
@@ -43,8 +42,7 @@
     justify-content: center;
     align-items: center;
     height: 20%;
-    padding-top: 5%;
-    padding-bottom: 5%;
+    padding-top: 20%;
     button {
         margin: 2%;
         width: 50%;

src/app/components/product-list/product-list.component.scss

@@ -1,11 +1,21 @@
+$small: 960px;
+$medium: 1360px;
+
 .product-list-container {
     display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
     width: 100%;
     height: 100%;
 }
 
 .product-item-container {
-    width: 100%;
-    height: 100%;
+    width: 20%;
+
+    @media screen and (max-width: $medium) {
+        width: 25%;
+    }
+
+    @media screen and (max-width: $small) {
+        width: 33.33%;
+    }
 }