Resolved How to justify text in buttons?

[winemonkey 0]

Is there a way to justify text in a button... I'd like the button to take the full width of the sidebar with the text justified to the right.

If you look at the primary sidebar here http://thewinesyndicate.ca/ab/, you'll see what I mean. I added a "fake" button above it to give you an example of what I'm looking for. The button at the bottom is fine due to the fact that the text is a lot longer.

[winemonkey 0]

Had to take the dummy button out... I basically need to align the bootstrap icons to the left and the text to the right... http://thewinesyndicate.ca/bc/ Is there a way to do that?

[James B 436]

Hi there, you can use css to justify the text and set the width of the button. You'll need to assign a class to the button first to adjust just the one, otherwise the below code will affect all the buttons.

You could try using #text-3 before hand to target that particular widget in the sidebar, but I'm not 100% sure that would work.

.btn { width: 168px; text-align: right; }

[James B 436]

Ah, we were obviously writing at the same time, sorry didn't see your second post until after I had posted. From what you've described on the second post you could just use css on the icon to get the following effect as per this screenshot http://screencast.com/t/ffn9RbErzXfo

li [class^="icon-"], li [class*=" icon-"] {

    text-align: left;

    width: 2.25em;

}

[winemonkey 0]

Thanks James B., Kinda works but still looks a little wonky. The icons are on the right side but the top 3 buttons are not wide enough.

[winemonkey 0]

Also... How do I get some space between those 3 top buttons without checking "Automatically add paragraphs" which screws up the top and bottom spacing/padding

I basically need the buttons at http://thewinesyndicate.ca/ab/ and at http://thewinesyndicate.ca/bc/ to be the same width as the "Join our mailing list" button with icons on the left and text on the right.

Sorry to make this such a pain... I'm learning.

[Danny+ 1,327]

Hi,

Add this to your custom CSS:

#site .btn-large {

width: 90%;

margin-bottom: 0.5em;

}[/CODE]

[winemonkey 0]

I'm almost there... buttons are full width with space in between, text is aligned to the right but the icons are still not aligned to the left...

[catrina 103]

Try this code:

#site .btn-large {

width: 90%;

margin-bottom: 0.5em;

margin-left: -4px;}

[winemonkey 0]

Weird, it actually centers the text in the buttons... No worries. I can live with the current layout.

[catrina 103]

Okay, sounds good. Do you need assistance with anything else or is that fine for now?

[winemonkey 0]

It's all good. Thank you

[catrina 103]

The topic was marked as resolved.