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

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


MadLegs

Question

  • Answers 34
  • Created
  • Last Reply

Top Posters For This Question

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

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.

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?

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.

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?

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?

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.

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.

Link to post
  • 0
Guest

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.

Link to post
  • 0
Guest

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.

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

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

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

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

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