X-Cart forums

[tony_sologubov]

Hi guys!

Sorry, it took me so long to publish the code.

This change turned to be really easy one and in order to show 4 products on product lists, you need to specify the following CSS code in the System settings > Look and feel > Custom CSS section in you admin area:

ul.products-grid.grid-list li.product-cell.box-product {
width: 25%;
}

ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{
clear: none;
}

ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{
clear: none;
}

ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{
clear: none;
}

If you need to show 5 products then you need to replace this piece of code:

ul.products-grid.grid-list li.product-cell.box-product {
width: 25%;
}

with the next one:

ul.products-grid.grid-list li.product-cell.box-product {
width: 20%;
}

Obviously, you are just changing the percentage that must belong to the product's box width.

Other lines:

ul.products-grid.grid-list li.product-cell:nth-child(2n) + li.product-cell{
clear: none;
}

ul.products-grid.grid-list li.product-cell:nth-child(3n) + li.product-cell{
clear: none;
}

ul.products-grid.grid-list li.product-cell:nth-child(4n) + li.product-cell{
clear: none;
}

are needed for disabling hard-coded rules that each 4th, 7th and so on product must start with new line.

If there is any questions, please let me know.

Tony.

[RichieRich]

This css is best if you specify for a larger screen size only. Smaller screen sizes will cause a problem in the display if you have the side column or in other screen sizes.

To fix the display issues, you can specify only if the screen size is the largest wrapping the css with 4 columns with ;

@media only screen and  (min-width: 1200px) {

}