From a5123fb3b6442112c7d29d9acf1a9f94ad978818 Mon Sep 17 00:00:00 2001
From: prashant-webkul <prashant.singh852@webkul.com>
Date: Wed, 3 Oct 2018 16:26:49 +0530
Subject: [PATCH] Storefront fixes

---
 .../src/Resources/assets/sass/components.scss | 25 +++++++++++++++----
 .../views/home/new-products.blade.php         | 10 ++++----
 public/themes/default/assets/css/shop.css     | 24 ++++++++++++++----
 3 files changed, 44 insertions(+), 15 deletions(-)

diff --git a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
index 51c40e05e..e66d1273d 100644
--- a/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
+++ b/packages/Webkul/Shop/src/Resources/assets/sass/components.scss
@@ -2,7 +2,7 @@
 .product-grid-4 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-    grid-column-gap: 45px;
+    grid-column-gap: 40px;
     grid-row-gap: 15px;
     grid-auto-rows: auto;
 }
@@ -17,20 +17,31 @@
 
 @media only screen and (max-width: 854px) {
     .product-grid-4 {
-        grid-template-columns: 30% 30% 30%;
+        grid-template-columns: 29.5% 29.5% 29.5%;
         grid-column-gap: 35px;
 
     }
 }
 
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 653px) {
     .product-grid-4 {
         grid-template-columns: 48.5% 48.5%;
         grid-column-gap: 17px;
     }
+}
 
-    .addtocart {
-        font-size: 0.71rem;
+@media only screen and (max-width: 425px) {
+    .product-card {
+        font-size: 90%;
+
+        .btn.btn-md {
+            padding: 5px;
+        }
+    }
+
+    .product-grid-4 {
+        grid-template-columns: 48.5% 48.5%;
+        grid-column-gap: 10px;
     }
 }
 
@@ -58,6 +69,10 @@
         }
     }
 
+    .product-description {
+        display: none;
+    }
+
     .product-ratings {
         width: 100%;
 
diff --git a/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php b/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php
index bd1d00ef2..84eefb109 100644
--- a/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php
+++ b/packages/Webkul/Shop/src/Resources/views/home/new-products.blade.php
@@ -4,7 +4,7 @@
         <span class="featured-seperator" style="color:lightgrey;">_____</span>
     </div>
 
-    <div class="new-product-grid product-grid-4">
+    <div class="product-grid-4">
         <div class="product-card">
             <div class="product-image">
                 <img src="vendor/webkul/shop/assets/images/new.png" />
@@ -21,7 +21,7 @@
                 </span>
             </div>
             <div class="cart-fav-seg">
-                <button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
+                <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
                 <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
             </div>
         </div>
@@ -42,7 +42,7 @@
                     </span>
             </div>
             <div class="cart-fav-seg">
-                <button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
+                <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
                 <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
             </div>
         </div>
@@ -63,7 +63,7 @@
                     </span>
             </div>
             <div class="cart-fav-seg">
-                <button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
+                <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
                 <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
             </div>
         </div>
@@ -84,7 +84,7 @@
                     </span>
             </div>
             <div class="cart-fav-seg">
-                <button class="btn btn-lg btn-primary addtocart">Add to Cart</button>
+                <button class="btn btn-md btn-primary addtocart">Add to Cart</button>
                 <span><img src="vendor/webkul/shop/assets/images/wishadd.svg" /></span>
             </div>
         </div>
diff --git a/public/themes/default/assets/css/shop.css b/public/themes/default/assets/css/shop.css
index e9f95f1df..0d83a069e 100644
--- a/public/themes/default/assets/css/shop.css
+++ b/public/themes/default/assets/css/shop.css
@@ -192,7 +192,7 @@ body {
 .product-grid-4 {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
-  grid-column-gap: 45px;
+  grid-column-gap: 40px;
   grid-row-gap: 15px;
   grid-auto-rows: auto;
 }
@@ -207,18 +207,28 @@ body {
 
 @media only screen and (max-width: 854px) {
   .product-grid-4 {
-    grid-template-columns: 30% 30% 30%;
+    grid-template-columns: 29.5% 29.5% 29.5%;
     grid-column-gap: 35px;
   }
 }
 
-@media only screen and (max-width: 550px) {
+@media only screen and (max-width: 653px) {
   .product-grid-4 {
     grid-template-columns: 48.5% 48.5%;
     grid-column-gap: 17px;
   }
-  .addtocart {
-    font-size: 0.71rem;
+}
+
+@media only screen and (max-width: 425px) {
+  .product-card {
+    font-size: 90%;
+  }
+  .product-card .btn.btn-md {
+    padding: 5px;
+  }
+  .product-grid-4 {
+    grid-template-columns: 48.5% 48.5%;
+    grid-column-gap: 10px;
   }
 }
 
@@ -244,6 +254,10 @@ body {
   color: #242424;
 }
 
+.product-card .product-description {
+  display: none;
+}
+
 .product-card .product-ratings {
   width: 100%;
 }