Some users on nopCommerce forums have asked this question that how to change the spacing between homepage featured products and homepage news in nopCommerce. The default theme that comes with nopCommerce out of the box works great and some users prefer to make design changes as per their needs / requirements.
Today, we will go over the process of making changes in the theme stylesheet to accomplish this task.
This is how default spacing looks like on the homepage:
Go to: Nop.Web / Themes / DefaultClean / Content / styles.css
Open "styles.css" file and find this:
.home-page .product-grid .item-box,.product-details-page .product-grid .item-box,.shopping-cart-page .product-grid .item-box { width: 24%; margin: 0 0.5% 50px;}
In order to increase or decrease the while spacing between homepage featured products and homepage news, we need to focus on the margin. So, let's update the margin like this:
.home-page .product-grid .item-box,.product-details-page .product-grid .item-box,.shopping-cart-page .product-grid .item-box { width: 24%; margin: 0 0.5% 200px;}
You should be able to see the change on your homepage like this:
A copy of this article is also available on Arvixe Blog.
