Archived

This topic is now archived and is closed to further replies.

  • 0

Resolved How to justify text in buttons?


Question

Posted · Report post

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.

Share this post


Link to post
Share on other sites

12 answers to this question

Posted · Report post

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?

Share this post


Link to post
Share on other sites

Posted · Report post

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; }

Share this post


Link to post
Share on other sites

Posted · Report post

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;

}

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

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.

Share this post


Link to post
Share on other sites

Posted · Report post

Hi,

Add this to your custom CSS:


#site .btn-large {
width: 90%;
margin-bottom: 0.5em;
}[/CODE]

Share this post


Link to post
Share on other sites

Posted · Report post

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...

Share this post


Link to post
Share on other sites

Posted · Report post

Try this code:

#site .btn-large {

width: 90%;

margin-bottom: 0.5em;

margin-left: -4px;}

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

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

Share this post


Link to post
Share on other sites

Posted · Report post

It's all good. Thank you

Share this post


Link to post
Share on other sites

Posted · Report post

The topic was marked as resolved.

Share this post


Link to post
Share on other sites