Saturday, November 10, 2018

Prestahop 1.7.4.2 - How to make reduce margin gap in between product container in classic template

In the original classic template the margin gap between the product container is 0 .625rem and it quite a distance between the products that making it looks not so nice. However you can change this by editing the custom.css in the .../htdocs/themes/classic/assets/CSS folder follow the following step how to edit the gap size between the container horizontally.

1. Login to your FTP i am using FileZilla

2. Look for the folder .../htdocs/themes/classic/assets/CSS

3. Open / edit the custom.css file using notepad++

4. Add the following css code edit it to 2px or up to your preference how many pixel do you want



#products .product-miniature, .featured-products .product-miniature, .product-accessories .product-miniature, .product-miniature .product-miniature {
margin: 0 .2px;
}

5. Save the custom.css and re-upload to replace the existing one.

6. Then login to the prestashop admin back office

7. Under Configure > Advanced Parameters > Performance click on "Clear Cache" button

8. Now the margin gap horizontal in the classic template should be reduced to closer to one another.

Prestashop how to make the margin gap closer between product container


No comments:

Post a Comment