Is there an easy way of styling each feature? I would like to put a light grey background with rounded corners.
I have tried overriding the css for
.sow-features-list .sow-features-feature.sow-features-feature-last-row, but it’s difficult to add spacing between the features without messing up the layout and pushing a feature onto the next row. If I set a smaller column width % it only works on that number of columns and messes up the responsive mobile view.
Hi Simon,
You should target .sow-features-feature so that it affects all of the features rather than just specific ones.
The way I would do this would be to add a background color, a border radius (for the rounding) and then set a border color to exactly the same color as the background. This way it gives the illusion of spacing when in reality, there isn’t any.
So, for example, my test page has a white background. Adding the following CSS will accomplish this:
.sow-features-list .sow-features-feature { background: #eee; border-radius: 20px; border: 1px solid #FFF; }The only downside to this method is that you need to be careful with how much left and right border you’re applying for the last features on a row.
Thanks, Alex. I tried all sorts o get the spacing between the tiles looking good, but in the end gave up!
I found it easier to create a 3 column row, each with a single Feature in it. A bit of a cludge, but easy to maintain still.