Home>Support>SiteOrigin Button Text Not Keeping Left

SiteOrigin Button Text Not Keeping Left

By Francis Palmer, 7 years ago. Last reply by Francis Palmer, 7 years ago.

I have a page of SiteOrigin Buttons each with button text set to align left. When the text is too long for one line it then defaults to centering the text. I would like the text aligned left even if it runs onto two lines.

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

  1. 7 years, 11 months ago Alex S
    Hi, I Work Here

    Hi Francis,

    Do you have a public URL where we can take a look at what’s going on? If you need to keep this URL private from other users, just select “Private Reply” on the bottom right of the comment box.

  2. 7 years, 11 months ago Francis Palmer

    Hi Alex

    Here is a print screen of the problem.

  3. 7 years, 11 months ago Alex S
    Hi, I Work Here

    Hi Francis,

    Unfortunately, we currently don’t support attachments for email replies. You’ll need to upload the image to a third party image hosting service such as vgy.me

  4. 7 years, 10 months ago Francis Palmer

    Hi Alex

    Please see the problem at http://www.placedirect.co.za/our-stock-2

    The problem particularly presents itself when viewed on smaller mobile devices.

  5. 7 years, 10 months ago Alex S
    Hi, I Work Here

    Hi Francis,

    Ah. Okay, so that’s a tricky situation as we don’t actually account for a completely transparent button. We would personally recommend a simple text link rather than a button widget for your setup as that accounts for this correctly.

    Regardless, you can fix this with some custom CSS. If you navigate to AppearanceCustom CSS, you’ll get our custom CSS editor. Just add the following code.

    .ow-button-base.ow-button-align-left a {
	text-align: left;
}

    You might also need to install the SiteOrigin CSS Editor.

  6. 7 years, 10 months ago Francis Palmer

    Hi Alex

    Appreciate your help. I tried the CSS code. That makes matters worse because now the second line runs into the icon and is further left than the top line.

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

    Hi Francis,

    Ah. Didn’t know that was undesired. So to avoid this we’re going to have to use a workaround. Please add the following CSS instead:

    .ow-button-base.ow-button-align-left a {
	text-align: left;
}

.ow-button-base.ow-button-align-left {
	position: relative;
}

.ow-button-base.ow-button-align-left .sow-icon-image {
	position: absolute;
	left: 0;
}

    Just note that the icons are slightly to the left of where they previously were. This is unavoidable.

  8. 7 years, 10 months ago Francis Palmer

    Hi Alex

    You are a magician. The fix is perfect. Many thanks.

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