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

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

Question

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.

Edited by Testing2134

Share this post


Link to post

Recommended Posts

  • 2

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

Share this post


Link to post
  • 1

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.

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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?

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

my co-worker's step-aunt makes $81 every hour on the laptop . She has been without a job for 6 months but last month her income was $21823 just working on the laptop for a few hours. this page......... www.worksite50.com

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

I am making 57 bucks hourly working from home. I never thought that it was legitimate but my best friend is earning $10 thousand a month by working online, that was really surprings for me, she recommended me to try it. You will lose nothing, just try it out on the following website.

???? www.pay-buzz.com

Share this post


Link to post
  • 0

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 -

Edited by rd176
Initial Revision

Share this post


Link to post
  • 0

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.

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