Versuchen, die Größe meiner Tasten auf Squarespace

Question

"zu beheben" Auf der Homepage von staterequirement.com habe ich eine Gruppe von Tasten, eine für jeden Staat. Die Seite ist auf Squarespace gebaut.

Squarespace bietet Ihnen drei "Schaltflächengrößen" mit jeweils eigenen CSS-Eigenschaften. Sie alle ändern jedoch die Größe der Schaltflächen basierend auf der Menge an Text.

Wenn Sie alle Schaltflächen in Spalten platzieren, sehen sie sehr wackelig aus, weil sie alle unterschiedliche Größen haben und ineinander laufen.

Mein Ziel ist es, dass diese fünf Reihen von Schaltflächen in geraden Spalten zusammenpassen und alle Schaltflächen die gleiche Größe haben.

Ich dachte, alle Schaltflächen in Bilder zu machen, aber das würde den Hover-Effekt, den die Tasten haben, wegnehmen.

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

Dies wurde mir vorgeschlagen, und es tut alle Zeilen Tasten die gleiche Größe, aber es schneidet „Massachusetts“ und die Spalten sind nicht gleichmäßig voneinander ab.

Ich denke, die Antwort ist eine Kombination aus dem Code, der mir angeboten wurde, und eine Polsterung ändern.

Bitte helfen!

P.S. - Wenn es eine bessere Lösung für dieses Problem gibt, bin ich absolut offen dafür, es zu hören.

Answer 1

Das folgende CSS wird Ihnen helfen, zu erreichen, was Sie suchen. Neben der Verringerung der Auffüllung und der Schriftgröße, um alle Schaltflächen kompakter und mit einer einzelnen Zeilenhöhe zu gestalten, wird die Eigenschaft min-width verwendet. Dadurch werden alle Schaltflächen, die weniger als 130 Pixel breit sind, 130 Pixel breit gemacht, was ungefähr der Breite der längsten Schaltfläche im Satz entspricht (South Carolina, glaube ich).

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

Wie von Serge Inácio erwähnt, Sie ein zusätzliches Problem haben, dass Sie die Square 12-Stützenraster in 5 Spalten zu unterteilen sind versucht, die es ebenso nicht tun (es eine Spalte basiertes System ist, auch wenn es nicht fühlt mag es). Daher sollten Sie stattdessen 4 Spalten verwenden. Mit 4 Spalten können Sie dann die Werte im obigen CSS etwas nach oben anpassen. Sie können auch feststellen, dass Schaltflächen in benachbarten Spalten bei bestimmten Breiten einander überlappen. Es kann auch hilfreich sein, zu vier Spalten zu gehen, aber wenn nicht, sollte das Problem zumindest leichter zu beheben sein.

Answer 2

Ich sehe Sie diferent col Größen in Ihrem Code verwenden: 3 x col sqs-col-2 span-2 und 2x col sqs-col-3 span-3 insgesamt 5 Spalten, wenn Sie es auf 4 Spalten reduzieren Sie mehr Platz haben (dh 4x col sqs-col-3 span-3) und den Code hinzufügen, wurde dir vorgeschlagen. Wenn es immer noch abschneidet, kannst du es in 3x col sqs-col-4 span-4 teilen oder die Schrift ein wenig kleiner machen.

Hoffnung half ich ein wenig :)

Grüße