How to change the spacing between homepage featured products and homepage news in nopCommerce

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:

 

 Looking for quality nopCommerce Web Hosting? Look no further than Arvixe Web Hosting!

Tags: , , , , | Posted under nopCommerce | RSS 2.0

Author Spotlight

Lavish Kumar

Founder, developer and owner of StrivingProgrammers.com - By profession, he is a software programmer / web developer, web designer & DBA. He is passionate about technology and electronic gadgets. He enjoys writing tech articles and developing web applications. He is a nopCommerce MVP and author of official nopCommerce Designer's Guide.

Leave a Reply

Your email address will not be published. Required fields are marked *