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

  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

To adjust the width of all Button Blocks, despite the text length, use one of these within the CSS Editor:

For "small" buttons:


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

For "medium" buttons:


.sqs-block-button-element--medium {width: 110px !important;}

For "large" buttons:


.sqs-block-button-element--large {width: 110px !important;}

You can also adjust the number before "px" to change the width. The "small", "medium", and "large" sizes are determined by the 'Size' options within the Button Block settings.

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