From 992c0d04fc4a3bf593d9a518b0a765c1ddcec562 Mon Sep 17 00:00:00 2001
From: Dinesh Salunke <dineshsalunke@consultbop.com>
Date: Fri, 3 Nov 2023 11:15:12 +0530
Subject: [PATCH] refactor: add some padding on smaller screens for the
 products sections

---
 templates/catalog/_partials/products.tpl | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/templates/catalog/_partials/products.tpl b/templates/catalog/_partials/products.tpl
index 566175a..8c76cda 100644
--- a/templates/catalog/_partials/products.tpl
+++ b/templates/catalog/_partials/products.tpl
@@ -22,8 +22,8 @@
  * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
  * International Registered Trademark & Property of PrestaShop SA
  *}
-<div id="js-product-list">
-  <div class="products grid grid-cols-4 gap-4">
+<div id="js-product-list flex flex-col">
+  <div class="products grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
     {foreach from=$listing.products item="product"}
       {block name='product_miniature'}
         {include file='catalog/_partials/miniatures/product.tpl' product=$product}
@@ -35,10 +35,9 @@
     {include file='_partials/pagination.tpl' pagination=$listing.pagination}
   {/block}
 
-  <div class="hidden-md-up text-xs-right up">
+  <div class="flex justify-center md:hidden my-4">
     <a href="#header" class="btn btn-secondary">
       {l s='Back to top' d='Shop.Theme.Actions'}
-      <i class="material-icons">&#xE316;</i>
     </a>
   </div>
 </div>