Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
suraag24

How can I adjust buttons to be the same size regardless of the text inside?

Question

I realize there has been a post about this, but they ruin my mobile site, if I could get some help with the coding to fix that?

site: www.vikingcleanersaz.com

If I could have help getting the "(existing customers)" in the right button on another line and "Sign up today" on the left button centered once its changed that would be amazing. Thanks for the help!

Edited by suraag24
Initial Revision

Share this post


Link to post

20 answers to this question

Recommended Posts

  • 0

Latest Answer:

Okay, here's what you want. I attached another image (samebuttons2.jpg) so you can see.


.homepage .sqs-block-button-element[href="/pickupdelivery"] {
   padding-top: 1.75em;
   padding-bottom: 1.75em;
}

.homepage .sqs-block-button .sqs-block-button-element--small {
   width: 100%;
   max-width: 290px;
   box-sizing: border-box;
}


Old Answer #3: - Remove the previous CSS I gave you originally. - Remove the text "(Existing Customers)" from the second button - Do not add another text block below the button. Instead, we'll add the text with CSS so that there won't be a gap between the button and the text. - Add the following CSS to the CSS Editor:


.homepage .sqs-block-button + .sqs-block-button .sqs-block-button-container--center:after {
 content: "(Existing customers)";
 display: block;
 color: black;
}

.homepage .sqs-block-button .sqs-block-button-element--small {
 width: 100%;
 max-width: 250px;
 box-sizing: border-box;
}

See attached image (samebuttons.jpg) for what this does.


Old Answer #2:

Assuming that you want the buttons to be the same HEIGHT and that you don't care about them being different WIDTHS, I would recommend editing your button block for the second button, removing the text "(existing customers)" from the button, then adding the text "(existing customers)" to a new text block below the button block. Then center the "(existing customers)" text within the text block.


Old Answer #1:

Hi there. Give this a try, inserted via the CSS Editor:


.sqs-block-button .sqs-block-button-element--small {
 width: 100%;
 max-width: 290px;
 box-sizing: border-box;
}

Do let me know if this works for you.

-Brandon


If this or any other answer helps you out, please give credit where credit is due: Accept the answer if you're the poster or Up-Vote the answer if you're not the poster. If it didn't help, feel free to inquire further or wait and see what others have to say. Code is provided without any warranty, expressed or implied.

samebuttons.jpg.2ab5423df98bd74d95a20fb35e796355.jpg

samebuttons2.jpg.0cebad4cdd0172e46157e94d71695e50.jpg

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

Hey Brandon thanks for the reply, but the right button is still longer than the left one. I played around and having max-width at 270px instead of 290px is a perfect width but still looking to have them be the same length as well.

Share this post


Link to post
  • 0

Hi. What operating system, browser and browser version are you using?


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

It's on chrome on OSX for my macbook... I just wanted the top button to be the same size as the bottom button with the text centered.

screen-shot-2016-07-22-at-122035-pm.png.c03bbc280bf881e5781e24f01e76a50c.png

Share this post


Link to post
  • 0

It seems I'm not understanding the problem. Here is what I see in the screenshot:

  • Both buttons are the same width.
  • The text "Existing Customers" is on it's own line (within the button)

As far as I can tell, that is what you requested.

Are you saying you want "Existing Customers" to be outside of the button entirely?

Can you explain what else about the screenshot is not right?

Edited by brandon
Initial Revision

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

I guess length is the proper word to use? If I had to put the buttons side by side they would not be the same exact size. I understand the top button is one line of text, unlike the bottom one which has 2, but I would still like the top button to be the size of the bottom.

Edited by suraag24
Initial Revision

Share this post


Link to post
  • 0

FYI: "Height" is the word you are going for. HTML elements are defined in terms of width and height. Length is not as easily understood, and should therefore be avoided in communication of this sort.

I updated my answer. Let me know how it works for ya.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

@BrandonW Is there no way to code for the height of a button? I care about both height and width, I just want the buttons to have the exact same dimensions. I'm not trying to be complicated, if it isn't possible to code for it I'll just keep them stacked.

Share this post


Link to post
  • 0

@BrandonW Is there no way to code for the height of a button? I care about both height and width, I just want the buttons to have the exact same dimensions. I'm not trying to be complicated, if it isn't possible to code for it I'll just keep them stacked.

Share this post


Link to post
  • 0

Yeah, sure. Just combine both answers. In other words, keep the CSS that I gave you (which will match the width), but also use the NEW answer (which will match the height).

Edited by brandon

If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

No problem. If that doesn't work, I just updated my answer one last time. It also has an image attached that shows the end result.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

@BrandonW I appreciate your help bringing it closer, but I want the site to look as clean as possible and having text under the button is a bit sloppy. I'd rather have a way to code the height of the top button to match the bottom without having to remove the text from the button and putting under.

Share this post


Link to post
  • 0

@BrandonW I appreciate your help bringing it closer, but I want the site to look as clean as possible and having text under the button is a bit sloppy. I'd rather have a way to code the height of the top button to match the bottom without having to remove the text from the button and putting under.

Share this post


Link to post
  • 0

Hey, now we're getting somewhere. See my latest (and hopefully final) update to the answer. I attached another screenshot (samebuttons2.jpg) to the answer so you can preview what it will look like.


If a response helped you out, send a 'Like' 👍 (bottom-right) and/or 'Upvote' vote.jpg.c260784ece77aec852b0e3049c77a607.jpg (top-left)

Share this post


Link to post
  • 0

I have a situation on my website, don't want to create another question to this.

My website is www.qualiaprod.com, and on the first page, I have 4 buttons, I want them to be all the same size. Can you please help me? @BrandonW

Share this post


Link to post
  • 0

Hi, That's fantastic. I'm looking for the same solution, except my sequence of buttons is in a different page from the home page. How do i point this CSS code to the page i need?

Thanks, Milo

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...