Prestashop 1.7 How to change the margin bottom of the product container box

By default, the classic template container box bottom margin is 1.563rem which is about 25px that is quite a huge gap and it leaves the product separated very significantly. However, we can change that space to make it looks closer by editing the theme.css



To edit the theme.css go to the /prestashop/htdocs/themes/classic/assets/css and look for theme.css right click and View/edit. Use NotePad++ for better editing and look for the following line in the CSS style sheet file.

#products .thumbnail-container,.featured-products .thumbnail-container,.product-accessories .thumbnail-container,.product-miniature .thumbnail-container{
position:relative;
margin-bottom:1.563rem;
height:278px;
width:160px;
background:#fff;
box-shadow:2px 2px 8px 0 rgba(0,0,0,.2)
}

Now change the margin-bottom: 1.563rem to margin-bottom: 0.5rem and save the file. Then re-upload to replace the original one. Finally, Reload the PrestaShop and it should take effect and If NOT follow the next step

1. Log on to the PrestaShop admin page

2. Go to Advanced Parameters > Performance

3. Click Save on the Smarty cache and wait until it is completed

4. Once completed - on the same page click Clear Cache and when it is done reload go to the PrestaShop and load it should reduce the bottom margin between product. This will affect the mobile template as well and it looks really nicer with the bottom margin getting closer without the presence of white space empty in between.



The second method simply changes the margin-bottom: 1.563rem to margin-bottom: 0.5rem and copy the whole code above into the custom.css and then re-upload to replace the old one that will work the same.