How to display the product list in 2 columns (a grid)

  1. Go to OpenCart Admin>Extensions>Modules
  2. Click Edit for OpenCart Mobile Framework Administration
  3. Switch to the "Customization" tab
  4. Place a check-mark next to "Enable full-width images for product listing"
  5. In the "Custom CSS" box paste this code:

    .product-list > div:nth-child(2n+1), .product-grid > div:nth-child(2n+1) {
    margin-right: 2%;
    .product-list > div, .product-grid > div { 
    display: inline-block;
    width: 48%;
    vertical-align: middle;
  6. Click "Save".

Have more questions? Submit a request


Please sign in to leave a comment.
Powered by Zendesk