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

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

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.

Hey Jonathan. I know this is a bit old, but did you ever find a way to prevernt the buttons from colliding? The above code doesn't work for me. I'm using Marquee.

How can I align the text to be centered vertically and horizontally?

Thanks for sharing! This solved my issue :)