Home Page Categories - How to show 4 categories in a row

hi , I want to show 4 categories in a row ... currently it seems as if its set to value 3 only and the fourth one goes under the 3.

Is there a way to get the categories set in a row rather than showing 3 in one row and the fourth as a separate row.

example is here . http://www.xardi.co.uk/

Home Page Categories under the banner.

Thanks in advance

Hello there,

You need to add some styles to solve this issue:

@media all and (min-width: 1001px){
.category-grid .item-box {
width: 24%;
margin: 0 0.5% 1%;
}
.category-grid .item-box:nth-child(3n+1) {
clear: none;
}
.category-grid .item-box:nth-child(4n+1) {
clear: both;
}
}

This code will fix the category grid in case there are more than 4 elements in it. Every fifth element will start in new line. Please notice that I place the code above in media query which refers to desktop resolutions (min-width: 1001px). You need to change it if your desktop resolution is different that this. Also you can change the proportion of the 'categor-ygrid item-box' (you can change 'em width and margins if you like).

Best regards,
Peter

Hi , thanks for your help it works like a charm .

Hi I am new to NOPCOmmerce. Can I know where to add these codes?

kshitij170892 wrote:

I assumed here you're using nopcommerce DefaultClean Theme.

Add that code to Presentation > Nop.Web > Themes > DefaultClean > Content > css > styles.css

Find @media all and (min-width: 1001px) and add code there.

Hope this helps!