Home>Support>Site Origin Features Widget Alignment

Site Origin Features Widget Alignment

By WillEtheridge, 6 years ago. Last reply by Alex S, 6 years ago.

Hi Site Origin Team

Thanks for the great plugin – Really easy to use!

One snag I’m having, I’m unable to align the icons in the features widget both on desktop and mobile view.

I’d be incredibly grateful if you could assist

My site can be found at http://woocommerce-181906-532768.cloudwaysapps.com/

All the best of wishes

Will

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 6 years, 3 months ago Alex S
    Hi, I Work Here

    Hi Will,

    Can you please elaborate on what alignment you’re specifically looking for? I ask as it looks like all of the icons are correctly aligned on desktop.

  2. 6 years, 2 months ago WillEtheridge

    Hi Alex,

    Thanks for the response – For me the Truck icon alongside lowcost speedy delivery is slightly below the others?

    Thanks

    Will

  3. 6 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Will,

    Ah. That’s due to the overall height of the icon itself – the truck is vertically smaller and the leaf is vertically larger. The following CSS won’t make them exactly the same height but it will allow for the images to be slightly closer in an alignment. Please add the following CSS to WP AdminAppearanceCustom CSS:

    .sow-features-list .sow-features-feature .sow-icon-container [class^="sow-icon-"] {
	height: auto !important;
}

    You might also need to install the SiteOrigin CSS Editor.

  4. 6 years, 2 months ago WillEtheridge

    Hi Alex,

    I've downloaded the CSS editor and added the code as suggested but don't seem to be having any luck?

  5. 6 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Will,

    Please try:

    .sow-features-list .sow-icon-container {
	margin: unset !important;
}
  6. 6 years, 2 months ago WillEtheridge

    Hi Alex,

    Unfortunately that doesn't work and really messes up things on mobile.

    Any other ideas?

    W

  7. 6 years, 2 months ago Alex S
    Hi, I Work Here

    Hi Will,

    Can you please add the following CSS:

    @media (min-width: 768px){
	.sow-features-list .sow-icon-container {
		margin: unset !important;
	}
}

    Once it doesn’t work, please leave it present so I can inspect the results and work out why it’s not working for you – it does in my testing which is why I’m not too sure it’s not for you.

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.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More