Frage zur Zentrierung von "Land/Region" und "Sprache" sowie der Fußzeilen-Menüstruktur in der mobile

[Monique2002]

Hallo zusammen,

ich habe auf meiner Shopify-Seite ein Problem mit der Darstellung der Land/Region- und Sprache-Auswahl, sowohl in der Desktop- als auch in der mobilen Ansicht. Ursprünglich waren die Textbezeichner ("Land/Region" und "Sprache") korrekt zentriert, aber nach einigen Änderungen, die ich an meinem CSS vorgenommen habe, sind diese Textbezeichner nun nicht mehr zentriert.

Zusätzlich hatte ich versucht, die Menüs in der Fußzeile in der mobilen Ansicht nebeneinander anzuordnen, anstatt untereinander, aber leider war das Ergebnis nicht das gewünschte. Ich habe viele CSS-Änderungen ausprobiert, einschließlich des Entfernens von Codes, die ich zuvor im base.css eingefügt habe, um die Zentrierung und das Layout zu optimieren, aber ich erhalte nicht die gewünschte Struktur.

Konkret möchte ich:

1. Die Textbezeichner für Land/Region und Sprache sowohl in der Desktop- als auch in der mobilen Ansicht wieder korrekt zentrieren.

2. In der mobilen Ansicht die Menüs in der Fußzeile (z. B. Support, Rechtliches, etc.) nebeneinander anstatt untereinander anordnen.

3. Sicherstellen, dass keine der Änderungen den anderen Bereich beeinflusst (z. B. das Layout der Land/Region- und Sprache-Auswahl).

Kann mir jemand helfen, wie ich diese Layout-Probleme beheben und die gewünschten Anpassungen umsetzen kann? Ich wäre dankbar für detaillierte Hinweise, wie ich den CSS-Code entsprechend anpassen kann.

Einige Fotos:

[Ben310 · Accepted solution]

Fuer Dawn Theme -> probiere mal folgendes im CSS Editor im Theme um „Land/Region“ und „Sprache“ zu zentrieren:

.footer__localization h2 {
  text-align: center;
  width: 100%;
  margin: 0 auto;
}

Footer-Menüs auf Mobil nebeneinander:

@media (max-width: 768px) {
  .footer__blocks {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    text-align: center;
  }

  .footer__blocks > div {
    flex: 1 1 45%; /* oder 33% bei 3 Spalten */
    min-width: 120px;
  }
}

Wahrscheinlich sind die einzelnen Menügruppen (Support, Rechtliches, Hinweis, etc.) als divs untereinander gestapelt. Auf Mobilgeräten willst du diese per flex oder grid nebeneinander legen. Aber geht nur, wenn genug Platz vorhanden ist...

[Monique2002]

@Ben310  Hey ! ❤️ 

Danke dir vielmals das erste Problem wurde sofort gelöst danke mein Lieber.

Aber das mit den Spalten gestaltet sich sehr schwer, geht das überhaupt auf der mobilen Ansicht? 

Hab ein Video mit Snipping Tool gemacht wollte dir das zeigen, aber leider kann ich es nicht hochladen...

Dankeeee!!

[Ben310]

Super...und ja, das wird leider schwierig da es einfach an zu viel Platz mangelt auf Mobile. Es gibt aber gute Experten hier die das für dich einbauen können. Ich rate aber davon ab.