I need to change the product display from 3 across to 4 across.

I need the custom head code to change the display of products from 3 across to 4 across. If you can help me I would be grateful. I have experimented  w/CSS but it is not formatting properly.

Hello,

in this case it is better to edit your "styles.css" file instead of adding custom code in the administration. Go to the file (Themes > Alfresco > Content > css > styles.css) and look for this code:

.item-box {
  float: left;
  width: 220px;
  margin: 0 0 20px 10px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.15);
  background: #fff;
  padding: 10px;
}
.item-box:nth-child(3n+1) {
        clear: both;
  margin-left: 0;
}

When you find it, change the value of the width property from 220px to 157px, and change the nth-child target from 3n+1 to 4n+1. Save your file and clear the cache of your browser to see the changes applied.

Keep in mind that this change will affect only products in category grids. The home page featured products will remain unaffected (3 per row). Also keep in mind that with these changes applied you will not have enough space in your product boxes for additional elements anymore, like the QuickView button, etc. The space within your product boxes will be very limited.

Please make a backup of your file before making editing it, in case you want to revert your changes in the future. Also, if you need any further assistance, please open a support ticket instead of writing in the forum.


Regards

You are great, All I had to do was make a few additional media size and .item-box .picture changes and it looks great. Just what I needed.

Thank you.