From 6618d6a7e074796dde73ff2d1cfc72a2f7b7e006 Mon Sep 17 00:00:00 2001
From: prashant-webkul <prashant.singh852@webkul.com>
Date: Mon, 1 Oct 2018 14:49:11 +0530
Subject: [PATCH] Responsive layouts

---
 .../Shop/src/Resources/assets/sass/app.scss   | 20 +------
 .../src/Resources/assets/sass/components.scss | 36 ++++++++++++
 public/themes/default/assets/css/shop.css     | 56 +++++++++++++------
 3 files changed, 78 insertions(+), 34 deletions(-)

diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
index ee3dca1f3..164fbb766 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/app.scss
@@ -7,8 +7,10 @@
 
 //main store front layouting
 .main-container-wrapper {
-    max-width: 1170px;
+    max-width: 1300px;
     width: auto;
+    padding-left: 15px;
+    padding-right: 15px;
     margin-left: auto;
     margin-right: auto;
 
@@ -16,22 +18,6 @@
         display: block;
     }
 
-    .product-grid-4 {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-        grid-column-gap: 27px;
-        grid-row-gap: 15px;
-        grid-auto-rows: auto;
-    }
-
-    .product-grid-3 {
-        display: grid;
-        grid-template-columns: repeat(3, minmax(240px, 1fr));
-        grid-column-gap: 27px;
-        grid-row-gap: 15px;
-        grid-auto-rows: auto;
-    }
-
     .product-list {
         .product-card {
             width: 100%;
diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
index ed0966b8e..9fbf6fcb5 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
@@ -1,4 +1,39 @@
 // product card, requires no changes for responsiveness.
+.product-grid-4 {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+    grid-column-gap: 45px;
+    grid-row-gap: 15px;
+    grid-auto-rows: auto;
+}
+
+.product-grid-3 {
+    display: grid;
+    grid-template-columns: repeat(3, minmax(240px, 1fr));
+    grid-column-gap: 27px;
+    grid-row-gap: 15px;
+    grid-auto-rows: auto;
+}
+
+@media only screen and (max-width: 854px) {
+    .product-grid-4 {
+        grid-template-columns: 30% 30% 30%;
+        grid-column-gap: 35px;
+
+    }
+}
+
+@media only screen and (max-width: 550px) {
+    .product-grid-4 {
+        grid-template-columns: 48.5% 48.5%;
+        grid-column-gap: 17px;
+    }
+
+    .addtocart {
+        font-size: 0.71rem;
+    }
+}
+
 .product-card {
 
     .product-image {
@@ -46,6 +81,7 @@
         display: inline-flex;
         width: 100%;
         align-items: center;
+        justify-content: space-between;
 
         .addtocart {
             border-radius: 0px;
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index 9b6a6a971..ca50bce8c 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -189,6 +189,39 @@ body {
   margin-top: 90px;
 }
 
+.product-grid-4 {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  grid-column-gap: 45px;
+  grid-row-gap: 15px;
+  grid-auto-rows: auto;
+}
+
+.product-grid-3 {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(240px, 1fr));
+  grid-column-gap: 27px;
+  grid-row-gap: 15px;
+  grid-auto-rows: auto;
+}
+
+@media only screen and (max-width: 854px) {
+  .product-grid-4 {
+    grid-template-columns: 30% 30% 30%;
+    grid-column-gap: 35px;
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  .product-grid-4 {
+    grid-template-columns: 48.5% 48.5%;
+    grid-column-gap: 17px;
+  }
+  .addtocart {
+    font-size: 0.71rem;
+  }
+}
+
 .product-card .product-image {
   max-height: 350px;
   max-width: 280px;
@@ -238,6 +271,9 @@ body {
   -webkit-box-align: center;
       -ms-flex-align: center;
           align-items: center;
+  -webkit-box-pack: justify;
+      -ms-flex-pack: justify;
+          justify-content: space-between;
 }
 
 .product-card .cart-fav-seg .addtocart {
@@ -351,8 +387,10 @@ body {
 }
 
 .main-container-wrapper {
-  max-width: 1170px;
+  max-width: 1300px;
   width: auto;
+  padding-left: 15px;
+  padding-right: 15px;
   margin-left: auto;
   margin-right: auto;
 }
@@ -361,22 +399,6 @@ body {
   display: block;
 }
 
-.main-container-wrapper .product-grid-4 {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  grid-column-gap: 27px;
-  grid-row-gap: 15px;
-  grid-auto-rows: auto;
-}
-
-.main-container-wrapper .product-grid-3 {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(240px, 1fr));
-  grid-column-gap: 27px;
-  grid-row-gap: 15px;
-  grid-auto-rows: auto;
-}
-
 .main-container-wrapper .product-list .product-card {
   width: 100%;
   display: inline-block;