Home>Support>Left-align items in SiteOrigin Features

Left-align items in SiteOrigin Features

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Using SiteOrigin Widgets Bundle 1.13.0 with WP 4.9.8, BeaverBuilder 2.1.4.5 and the Astra theme.

I would like the items in the list to left-align. (They appear to be centered.) Is there a way to do this? Many thanks!

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, 9 months ago Alex S
    Hi, I Work Here

    Hi Richb-hanover,

    You can do this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add following CSS.

    .sow-features-feature {
    	text-align: left !important;
    }
    

    You might also need to install the SiteOrigin CSS Editor.

  2. 6 years, 9 months ago richb-hanover

    Hi Alex, Thanks for the speedy response. I did install the SiteOrigin CSS Editor and added that bit of CSS, but it didn’t work.

    Here’s the site: https://pinnacleproject.info. The footer widgets seem to be center-aligned – here’s a screen shot: screen shot - center aligned items

    I looked at the Pseudo Elements in the Firefox Inspector, and see the CSS there, but apparently it’s getting overridden somewhere. Any other thoughts? Thanks.

    Rich

    ::selection {
        background-color: #085944;
        color: #ffffff;
    }
    ::selection {
        color: #fff;
        background: #0274be;
    }
    ::selection {
        color: #fff;
        background: #0274be;
    }
    element {
    }
    .so-widget-sow-features-default-ad0d76b6f034 .sow-features-list .sow-features-feature h5 a {
        color: inherit;
        text-decoration: none;
    }
    .site-footer a {
        color: #eaeaea;
    }
    a, .page-title {
        color: #085944;
    }
    .secondary a *, .site-footer a *, .site-header a *, a {
        -webkit-transition: all .2s linear;
        transition: all .2s linear;
    }
    a, a:focus {
        text-decoration: none;
    }
    a {
        color: #4169e1;
    }
    a, a:focus, a:hover, a:visited {
        text-decoration: none;
    }
    a {
        background-color: transparent;
    }
    a, abbr, acronym, address, applet, big, blockquote, body, caption, cite, code, dd, del, dfn, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, iframe, ins, kbd, label, legend, li, object, ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, ul, var {
        border: 0;
        font-size: 100%;
        font-style: inherit;
        font-weight: inherit;
        margin: 0;
        outline: 0;
        padding: 0;
        vertical-align: baseline;
    }
    *, ::after, ::before {
        -webkit-box-sizing: inherit;
        -moz-box-sizing: inherit;
        box-sizing: inherit;
    }
    .so-widget-sow-features-default-ad0d76b6f034 .sow-features-list .sow-features-feature .textwidget > h5 {
        font-size: 13px;
        color: #ffffff;
    }
    h1, h2, h3, h4, h5, h6 {
        font-family: "Open Sans";
        font-weight: 800;
    }
    body, h1, .entry-title a, .entry-content h1, .entry-content h1 a, h2, .entry-content h2, .entry-content h2 a, h3, .entry-content h3, .entry-content h3 a, h4, .entry-content h4, .entry-content h4 a, h5, .entry-content h5, .entry-content h5 a, h6, .entry-content h6, .entry-content h6 a {
        color: #3a3a3a;
    }
    h5, .entry-content h5, .entry-content h5 a {
        font-size: 18px;
        font-size: 0.9rem;
    }
    h1, .entry-content h1, .entry-content h1 a, h2, .entry-content h2, .entry-content h2 a, h3, .entry-content h3, .entry-content h3 a, h4, .entry-content h4, .entry-content h4 a, h5, .entry-content h5, .entry-content h5 a, h6, .entry-content h6, .entry-content h6 a, .site-title, .site-title a {
        font-family: 'Open Sans',sans-serif;
        font-weight: 800;
    }
    .entry-content h5, h5 {
        color: #808285;
        line-height: 1.6;
        font-size: 1.2em;
    }
    .so-widget-sow-features-default-ad0d76b6f034 .sow-features-list .sow-features-feature.sow-icon-container-position-right {
        text-align: left;
    }
    .sow-features-feature {
        text-align: left !important;   <=========== It's right here ...
    }
    .site-footer {
        color: #fff;
    }
    body, button, input, select, textarea {
        font-family: 'PT Sans',sans-serif;
        font-weight: 400;
        font-size: 20px;
        font-size: 1rem;
        line-height: 1.3;
    }
    body, button, input[type="button"], input[type="submit"], textarea {
        line-height: 1.85714285714286;
    }
    body {
        -moz-osx-font-smoothing: grayscale;
    }
    body {
        color: #808285;
        font-style: normal;
    }
    html {
        font-size: 125%;
    }
  3. 6 years, 9 months ago richb-hanover

    PS I took a moment to watch the video of using the CSS editor, and holy moly! That’s a very sexy piece of software!

    I still haven’t found a workaround to left-justify the items, though

  4. 6 years, 8 months ago Alex S
    Hi, I Work Here

    Hi Richb-hanover,

    Thank you for the link. Please add the following additional CSS to WP AdminAppearanceCustom CSS:

    .sow-features-feature .textwidget {
    	margin: initial !important;
    }
    

    PS I took a moment to watch the video of using the CSS editor, and holy moly! That’s a very sexy piece of software!

    Thank you for your very kind words! :)

  5. 6 years, 8 months ago richb-hanover

    Hi Alex – yes that bit of CSS made the difference. Thanks. (See https://pinnacleproject.info)

    One more fussy question: the “>” icons slightly above (vertically) the text (see image below)

    I looked in the CSS Editor, but had trouble identifying what element contained the “>” icon. Is there a way to adjust the vertical alignment? Thanks again.

    Note lack of vertical alignment of “” />

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

    Hi Richb-hanover,

    Please and adjust the following CSS:

    .sow-features-list .sow-features-feature h5 {
        margin: 13px 0 0 !important;
    }
    

    Specifically, adjust the 11px to get the desired alignment.

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