HomepageCategories

Hi,

How can I display more then 3 categories in one row on the homepage (@Html.Action("HomepageCategories", "Catalog") ?

In 980 css I found the .home-page-category-grid .item-box, 
.sub-category-grid .item-box,
.item-box

where I can edit the width of the boxes, but I want to show 5 or six categories in one row.

Hello,

I will advise you to use this css code and paste it in your Custom Head Styles textfield. it is located in your nopCommerce Administration -> Plugins -> Seven Spikes Themes -> Nop Native Theme -> Settings.

@media (min-width: 1281px){

.home-page-category-grid .item-box, .sub-category-grid .item-box {
    width: 23.5%;
    margin: 0 0 2% 2%;
}
.home-page-category-grid .item-box:nth-child(3n+1), .sub-category-grid .item-box:nth-child(3n+1) {
    margin: 0 0 2% 2%;
    clear: none;
}
.home-page-category-grid .item-box:nth-child(4n+1), .sub-category-grid .item-box:nth-child(4n+1) {
    margin-left: 0;
    clear: both;
}

}

Thanks!

Hi,

I tried to change the grid for the ipad mini, by changing 768.css and 768.rtl.css with the code for 4 per row. Whatever I try (also clearing cache etc.), it keeps showing 3 in a row. Any idea what I can do to display 4 item-boxes on a row for the home-page-category-grid and sub-category-grid on the ipad mini ?

Hello,

To change the number of items to four for 768px and above you will have to replace the css code I provided you with to this one:

@media (min-width: 768px){

.home-page-category-grid .item-box, .sub-category-grid .item-box {
    width: 23.5%;
    margin: 0 0 2% 2%;
}
.home-page-category-grid .item-box:nth-child(2n+1), .sub-category-grid .item-box:nth-child(2n+1) {
    margin: 0 0 2% 2%;
    clear: none;
}
.home-page-category-grid .item-box:nth-child(3n+1), .sub-category-grid .item-box:nth-child(3n+1) {
    margin: 0 0 2% 2%;
    clear: none;
}
.home-page-category-grid .item-box:nth-child(4n+1), .sub-category-grid .item-box:nth-child(4n+1) {
    margin-left: 0;
    clear: both;
}

}