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

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


suraag24

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
Link to comment
  • Answers 20
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Posted Images

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)

Link to comment
  • 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)

Link to comment
  • 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
Link to comment
  • 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)

Link to comment
  • 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.

Link to comment
  • 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.

Link to comment
  • 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)

Link to comment
  • 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.

Link to comment
  • 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.

Link to comment
  • 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)

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...