OK. A quick overview of how to style snaf columns. This is a common issue that has been discussed many times on the forum.
As an example I will talk about having three per row but it applies to any number.
As default in column grid each 'box' is roughly one third or the width of the available space. If you add margins and borders to the box it will make the box wider than one third of the available space. Therefore three of the boxes will not fit in a row. This is the problem.
So, first thing you need to do is remove all the borders and margins and possibly padding from the existing 'box'. That probably would be something like:
Code:
.tabTable .centerBoxContentsProducts{
border: none !important;
margin: none !important;
}
That should result in the correct number of boxes per row. Depending on your template you may have to do more work than this to remove the styling.
Then, in SNAF 1.2 and upwards, there is another 'box' inside that box. This means that you can add styling to this inner box without breaking the layout. Something like:
Code:
.innerColumn{
border:1px solid red;
margin: 5px;
border: 5px;
}
All of this will depend a little on the template but that should be enough to get you going.