This thread is over two years old and may be outdated. Please create a new thread if you need help, or email us if you have an active Premium license.

SiteOrigin Features widget – styling each feature

Open 2 replies customizationpluginplugin-widgets-bundle
Simon Maddox
8 years ago · Last reply by Simon Maddox 8 years ago

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.

This is our free support forum. Replies can take several days.

Need fast email support? Get SiteOrigin Premium

Replies

2
  1. Alex S Staff 8 years, 11 months ago

    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.

  2. Simon Maddox 8 years, 11 months ago

    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.

Replies on this thread are closed.

Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Have a different question or issue?

Start New Thread