Zum Inhalt springen

Wie kann ich Karten auf die gleiche Höhe bringen?

Verwenden Sie benutzerdefiniertes CSS, um Karten in einer Zeile auf die gleiche Höhe zu bringen und die Ausrichtung des Textes zu steuern.

Lassen Sie Karten in derselben Zeile einheitlicher erscheinen, indem Sie jede Karte auf die volle Höhe dieser Zeile strecken. Bis dedizierte Einstellungen verfügbar sind, fügen Sie dem Abschnitt in der Einstellung Custom CSS ein kleines CSS-Snippet hinzu. Einzelheiten zur Einrichtung finden Sie in der Shopify-Dokumentation zum Hinzufügen von benutzerdefiniertem CSS zu Ihrem Theme

  1. Wählen Sie im Theme-Editor den Abschnitt aus, den Sie aktualisieren möchten. Eine Übersicht finden Sie in der Shopify-Dokumentation zum Theme-Editor

  2. Scrollen Sie zum Ende der Abschnittseinstellungen und öffnen Sie Custom CSS.

  3. Fügen Sie das folgende CSS ein:

    .card {
    height: 100%;
    }
  4. Speichern Sie Ihre Änderungen.

Standardmäßig kann der Kartentext am unteren Rand einer Karte mit gleicher Höhe verankert sein. Wenn der Text stattdessen direkt unter dem Bild platziert werden soll, fügen Sie auch dieses CSS hinzu:

.card__content {
justify-content: flex-start;
}
  1. CSS pro Abschnitt anwenden. Fügen Sie den Code in jedem Abschnitt hinzu, in dem die Karten die gleiche Höhe haben sollen.
  2. Textausrichtung bewusst auswählen. Fügen Sie das zweite Snippet nur hinzu, wenn der Kartentext direkt unter dem Bild beginnen soll.
  3. Vor der Vorschau speichern. Speichern Sie Ihre Änderungen und überprüfen Sie anschließend den Abschnitt, um zu bestätigen, dass das Kartenlayout korrekt aussieht.