Pacific: How can I make the button size the same regardless of text?

I appreciate that the size of the button adjusts to the text, but from a design perspective, it looks bad. Is there a way to make the button size the same? I am using the Pacific template.

I recently helped someone with this same issue on another template. Wish I could find that email that I had sent.

I did look just now at the Pacific template's demo page. There's a button at the bottom, and I was able to set the width using the following rule:

#OTButton a {width: 300px}

Do you have a page already with buttons on it that you want to all be the same size? Point us to that page, and we can better help. The above rule might or might apply to your specific case.

I love fast responses. Thank you.

The website is http://www.skinbycathy.com/. I have three buttons on the landing page for each main section. If you scroll down from the home page, you will see one button labelled "DISCOVER CATHY'S APPROACH". That is the absolute maximum width (and probably too over-powering).

Can you help?

There's actually a lot to think about with your site. It looks though, like you consistently use small buttons for those top three. Thus, you can try adding the following rule to your Custom CSS Editor:

.sqs-block-button-element--small {width: 210px !important;}

Take note of the double-hyphen in front of "small.".

This rule leaves the other buttons on your pages as they are. It's really only those top three that need to be the same. I agree with you on wanting them to be that way.

The buttons are wide enough so as to collide when you narrow the browser window. So....

...you should also consider adding a rule like:

@media screen and (min-width: 641px) and (max-width: 830px) {
   .sqs-block-button-element-element--small {
       width: 150px !important;
   }
}

I can't test this particular rule thoroughly right now, but I believe it will protect you from colliding buttons. Make your browser window wider and narrower, and you'll see what I'm getting at. I believe I have the correct syntax here.

Thank you. The first bit of code accomplished what I wanted. For the second, I have tested on my desktop and mobile and it doesn't change anything. I will test a little more.

Since you seem to my guy with all the answers today, I also need to figure out how to lock my footer. The logo stays put, but the email address and phone number jump around. Any suggestions?

Thank you. The first bit of code accomplished what I wanted. For the second, I have tested on my desktop and mobile and it doesn't change anything. I will test a little more.

Since you seem to my guy with all the answers today, I also need to figure out how to lock my footer. The logo stays put, but the email address and phone number jump around. Any suggestions?

Those footer items are supposed to move around. That's part of the responsive-design approach that allows your site to look good on phone and tablet as well as on a PC.

I recommend center aligning your phone number. That way, the phone, your logo, and your email will stack up vertically and all be centered when the browser window is narrow like on a phone or a tablet.

You might also create a 300 pixel-wide version of your logo, and upload that narrower image. Doing so will help avoid that very large logo that you get when the browser window gets just narrow enough for the elements to stack.

I tried your solution for the footer and it looks much better when adjusting to different screen sizes. Thank you.

I tried your solution for the footer and it looks much better when adjusting to different screen sizes. Thank you.

Any idea how to get this to work on the Momentum template?

http://www.gatessuter.ca

Yes. I took a look at your home page. Try adding the following CSS rule to your Custom CSS Editor:

#collection-55b2be7ce4b0d43c4cf5074e .sqs-slice-buttons li {width: 8em;}

The #collection identifier limits the rule to your home page. The rest of the rule hones in on those two buttons.

My website is www.joelbuxton.info and I am having the same problem. I have never inserted code into my website before either. What code would I need to insert to change my buttons to be the same size despite the amount of text within them. The template I use is Dovetail.

Many thanks.

Hi I also have a question regarding button width. If i inspect a button i find that the width is set to auto. If i change it to 100% i looks like i want it. Could somebody hep my out with som css. I tried this css (blow) with any luck. It would be very much appreciated. I am using OM template.

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

I am having the same obstacle of wanting all of my buttons on one page to be the same size, regardless of the amount of text I have in each button. I'm using Bedford template. Is anyone familiar with how to do this? Thank you!

Clare, what is your website URL? Which page, and which specific buttons?

Hi, Madlegs, I got this to work on my site, i´m using the Five template.you can adjust the with ass you see i have set mine to 88 %.

/* button full width DO NOT DELETE*/.sqs-block-button .sqs-block-button-element { display: inline-block; width: 88%; height: auto; padding: 1em 2.em; color: #fff; background-color: #272727; border-width: 0; font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; line-height: 1em; font-weight: normal; font-style: normal; text-transform: uppercase; letter-spacing: 0px; text-align: center; text-decoration: none; cursor: pointer; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; line-height: normal;}

Hi Jonathan,

Thanks for solving this problem for so many - I am struggling with the same problem on the Marquee template - I am trying to make it so that all my large buttons are the same size, regardless of the text. Moreover, I'm trying to isolate this customization to one page only.

Would you be able to help me with this?

Thanks in advance -

@JonathanGennick

I would really appreciate some help making the buttons on these pages the same size!

http://www.nomadwine.co/collaboratehttp://www.nomadwine.co/home

Thank you!

@JonathanGennick

I would really appreciate some help making the buttons on these pages the same size!

http://www.nomadwine.co/collaboratehttp://www.nomadwine.co/home

Thank you!

Emma, it looks like the following rule will do the job for your home page:

#collection-57728b53e4fcb512c0673cf9 #page .sqs-block-button-element {
   width: 132px;
}

And the following for your collaborate page:

#collection-57728c2de6f2e13395d4be5b #page .sqs-system-button {
   width: 134px;
}

The #collection-xxx part of each rule identifies the specific page. View a page, view the source, type ctrl-f and search on "body", and you should see the page's ID value.

You can then target the #page element so as to exclude buttons in the footer area. Then the last part of each rule targets all the buttons on each respective page.

Slammed with travel and work deadlines this week and the next. I will try and make time to look at those buttons for you, but I can't promise anything at this point.

@emmanomadwine For your first page that you list, it looks like you can add the following rule to your Custom CSS Editor:

#collection-57728c2de6f2e13395d4be5b #content .sqs-system-button {width: 150px;}

The collection-5772... portion is the collection identifier for that specific page of your site. You can View->Source from your browser and look in your page's body tag to find where I got it from.

The reference to "content" part refers to the main content of your page. It is a template-specific value. Then sqs-system-button to target the buttons within your main content.

@emmanomadwine: And it looks like the following will do it for your other page:

#collection-578ef7779f74566d5f3dd580 #content .sqs-block-button-element--medium {width: 150px;)

I've been meaning to write a blog post on button sizing. I'll try and push that higher on my priority list.

Try not to go too much wider with button widths. The 150 pixels seems to fit ok on an iPhone, so I think we're good as far as mobile viewing goes. If you start making reeeeeealy wide buttons though, then the CSS gets more complicated to accommodate narrow displays.

Hi @JonathanGennick

I have attempted the code above to avoid the buttons colliding when the browser window resizes, however, it's not working for me and I'm not sure what I'm missing! I used the code below (I'm using the Brine template). Any help would be much appreciated it! Thank you :)

.sqs-block-button a {%|35987535_1|%       width: 120px !important;}%|-632251116_3|%@media screen and (min-width: 641px) and (max-width: 830px)  {%|-1846671622_4|%             width: 150px !important;         } }