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!
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.
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:
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%; }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
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; }Thank you for your very kind words! :)
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.
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.