On the homepage of staterequirement.com I have a group of buttons, one for each state. The site is built on Squarespace.
Squarespace gives you three "button sizes," each with their own CSS properties. They all, however change the size of buttons based on the amount of text.
When placing all of the buttons in columns, they look very wonky, because they are all different sizes, and run into each other.
My goal is to have these five rows of buttons fit together in straight columns, and all the buttons the same size.
I thought of making all of the buttons into images, but that would take away the hover effect that the buttons have.
.medium-button-shape-rounded .sqs-block-button .sqs-block-button-element--medium, .large-button-shape-rounded .sqs-block-button .sqs-block-button-element--large
{ width: 100px}
This has been suggested to me, and it does make all of the rows buttons the same size, but it cuts off "Massachusetts", and the columns are not evenly spaced.
I think the answer is a combination of the code that was offered to me, and a padding change.
Please help!
P.S. -- If there is a better solution, to this issue, I am absolutely open to hearing it.
The following CSS will help you achieve what you're looking for. Besides decreasing the padding and font size in order to make all the buttons more compact and a single-line high, it makes use of the min-width property. This makes all buttons that are less than 130px wide to be made to be 130px wide, which is around the width of the longest button in the set (South Carolina I believe).
.sqs-block-button .sqs-block-button-element--medium {
padding: 14px 18px;
font-size: 11px;
min-width: 130px;
}
As mentioned by Serge Inácio, you have an additional problem in that you're attempting to divide Squarespace's 12-column grid into 5 columns, which it will not do equally (it is a column-based system, even if it doesn't feel like it). Therefore, consider using 4 columns instead. With 4 columns, you may then be able to adjust the values in the above CSS upward a bit. You may also notice that at certain widths, buttons in adjacent columns overlap one-another. Going to four columns may help this as well, but if it doesn't, it should at least make the problem easier to fix.