responsive fix

src/app/components/home/home.component.scss

@@ -1,5 +1,15 @@
+$small: 600px;
+$medium: 960px;
+
 .body-container {
     width: 100%;
     height: 100%;
     padding-top: 5%;
+    @media screen and (max-width: $medium) {
+        padding-top: 15%;
+        padding-bottom: 15%;
+    }
+    @media screen and (max-width: $small) {
+        padding-top: 25%;
+    }
 }

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

@@ -1,3 +1,7 @@
+$small: 600px;
+$medium: 960px;
+
+
 .product-card {
     display: flex;
     flex-direction: column;
@@ -46,6 +50,12 @@
     button {
         margin: 2%;
         width: 50%;
+        @media screen and (max-width: $medium) {
+            width: 65%;
+        }
+        @media screen and (max-width: $small) {
+            width: 80%;
+        }
     }
 }
 

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

@@ -1,5 +1,5 @@
-$small: 960px;
-$medium: 1360px;
+$small: 600px;
+$medium: 960px;
 
 .product-list-container {
     display: flex;
@@ -12,10 +12,10 @@ $medium: 1360px;
     width: 20%;
 
     @media screen and (max-width: $medium) {
-        width: 25%;
+        width: 33.33%;
     }
 
     @media screen and (max-width: $small) {
-        width: 33.33%;
+        width: 50%;
     }
 }