私のボタンのサイズをSquarespaceに固定しようとしています

Question

staterequirement.comのホームページには、各状態ごとに1つのボタンがあります。このサイトはSquarespace上に構築されています。

Squarespaceには3つの「ボタンサイズ」があり、それぞれに独自のCSSプロパティがあります。しかし、それらはすべて、テキストの量に基づいてボタンのサイズを変更します。

すべてのボタンを列に配置すると、ボタンはすべて異なるサイズであり、互いの間でやりとりされるため、非常にうんざりして見えます。

私の目標は、これらの5行のボタンを直線の列に合わせ、すべてのボタンを同じサイズにすることです。

私はすべてのボタンを画像にすることを考えましたが、それはボタンが持つホバー効果を取り去ります。

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

これは私に示唆されており、それは、行のボタンと同じ大きさのすべてを作るんが、「マサチューセッツ」を遮断し、そして列が均等に配置されていません。

答えは私に提供されたコードとパディングの変更の組み合わせだと思います。

助けてください！

P.S. - より良い解決策がある場合、この問題には、私はそれを聞くことに絶対に開放しています。

Answer 1

次のCSSはあなたが探しているものを達成するのに役立ちます。すべてのボタンをよりコンパクトにし、1行の高さにするために、パディングとフォントサイズを小さくすることに加えて、min-widthプロパティを使用します。これにより、130px幅未満のすべてのボタンが130px幅になります。これは、セット内の最も長いボタンの幅になります（サウスカロライナ）。

.sqs-block-button .sqs-block-button-element--medium { 
    padding: 14px 18px; 
    font-size: 11px; 
    min-width: 130px; 
} 

セルジュ・イナシオで述べたように、あなたがその中に付加的な問題を持っているあなたはそれが均等にしないだろうこれは、5列にSquarespaceの12列のグリッドを分割しようとしている（それは列ベースのシステムであり、たとえそれがであっても、のように感じる）。したがって、代わりに4列を使用することを検討してください。 4つの列を使用すると、上のCSSの値を少し上に調整できます。特定の幅では、隣接する列のボタンが重なり合っていることがわかります。 4つの列に行くことも同様に役立ちますが、そうでない場合は、問題を簡単に修正する必要があります。

Answer 2

私はあなたのコードでdiferent COLサイズを使用参照：X col sqs-col-2 span-2 3と2倍col sqs-col-3 span-3は5列の合計を持って、あなたは4列にそれを減らす場合は、より多くのスペースを持っている（つまり、4倍col sqs-col-3 span-3）とそのコードを追加しますあなたに提案されました。まだそれが切れた場合は、それを3x col sqs-col-4 span-4に分割するか、フォントを少し小さくすることができます。

希望私は少しを助けた:)

よろしく