Elemente mit CSS centern - Enterprise Theme

Deutsch Diskussion Technische Fragen & Antworten
,

Topic summary

Ziel: Elemente in einer Collection List im Shopify-Theme mittig zentrieren, speziell das letzte Element bei ungerader Anzahl in der mobilen 2-Spalten-Ansicht. Bisheriger CSS-Versuch mit display:flex (wie bei der Logo List) führt in der Collection List zu ungewollter Größenverkleinerung.

Neueste Hinweise:

  • Theme-abhängig; Link wurde bereitgestellt. Für Desktop kann die Anzahl der Collection List Items so festgelegt werden, dass sie die Breite gleichmäßig füllen – dann ist zentrieren ggf. obsolet.
  • Auf Mobile handelt es sich um ein Raster (Grid), das sich per CSS allein nicht „aufbrechen“ lässt. Für ein mittiges letztes Element bei ungerader Anzahl wäre eine Logik im Code nötig (z. B. Liquid-Abfrage), um das letzte Element gesondert zu behandeln oder aus dem Raster zu nehmen.
  • Vorschlag aus der Runde: justify-content testen (nicht bestätigt, ob es das Größenproblem löst).

Offen/Fragen:

  • Wie genau die Item-Anzahl im Theme gesetzt wird (Anleitung erbeten).
  • Ob eine Liquid-Lösung umgesetzt werden kann (Fragesteller ist Anfänger) oder eine alternative Section genutzt wird.

Status: Keine finale Lösung; weitere Klärung und Tests erforderlich. Zentrales Artefakt: das gepostete CSS-Snippet.

Summarized with AI on December 16. AI used: gpt-5.
1

Hallo Zusammen,

ich versuche aktuell die Elemente in einer Collection List mit dem benutzerdefinierten CSS mittig zu zentrieren.

Die Einstellung gibt es im Theme nicht und so werden die Elemente in der Collcetion List ,welche sich auf de Startseite befinden, linksbündig angezeigt. Auf Mobile werden immer zwei Elemente pro Reihe angezeigt. Bei einer ungeraden Zahl wird das letzte Element linksbündig angezeigt. Dieses sollte auch mittig angezeigt werden.

Bei einer Logo List habe ich das mit folgendem CSS geändert. Bei der Collection List funktioniert das aber nicht. Durch “display: flex” werden die Elemente der Collection List zwar mittig zentriert aber auch in verschiedene Größen verkleinert.

.logo-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}

Ich freue mich über eure Hilfe!

Danke

Jakob

1 Like
2

@Jakob_blm kannst du uns einen Link zu deiner Seite zur Verfügung stellen? Die Anpassung ist nämlich Theme-Abhängig.

3

URL & Passwort

4

@Jakob_blm du kannst, was die Desktopansicht angeht, die zutreffende Anzahl als Collection List Items hinterlegen, so werden die Elemente über die Seitenbreite gleichmäßig verteilt. Ich bin mir nicht sicher, ob es nötig wäre, diese zu zentrieren, wenn sie gleichmäßig angeordnet werden.

Was die mobile Ansicht angeht, so handelt es sich um ein Raster, das man nicht einfach “aufbrechen” kann. Hierzu müsste man im Code eine Abfrage machen, um herauszufinden, dass es eine ungerade Zahl ist, um dann das letzte Element aus dem Raster zu entfernen. Das lässt sich nicht einfach über eine CSS Anpassung ändern.

Wie sind denn deine HTML-/Liquid-Kenntnisse?

5

@Finer Alles klar, danke. Wie legt man die Anzahl der Items fest, dass die sich gleichmäßig verteilen?

In HTML/ Liquid bin ich noch Anfänger. Eventuell werde ich dann eine andere Section verwenden um das ganze zu umgehen.
Aber wenn die gleichmäßige Anordnung funktioniert wäre das evtl. auch schon eine Lösung.

6

Hast du justify-content bereits versucht?