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

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!

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.

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.

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

Also, can you post a screenshot?

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.

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?

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.

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.

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

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

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

Perfect. Appreciate the patience.

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.

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

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

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.

@BrandonW That worked perfectly! Thank you!

@BrandonW That worked perfectly! Thank you!

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

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