Raum zwischen Header und Vorlage entfernen

[Kanarentrader]

Hallo,

ich habe bei dem Standard Theme das Problem, dass sich bei Monitoren mit hoher Auflösung ein leerer Zwischenraum zwischen dem Header und dem Contentbereich bildet, wenn nicht genug Inhalt vorhanden ist. Diesen leeren Raum hätte ich eher zwischen Content und Footer erwartet.

Was muss man ändern?

[Gabe]

Hey @Kanarentrader 

Danke für die Fragen und bei so einem Fall wäre ein befristeter Vorschaulink oder Link zu einem Beispiel sehr hilfreich das schneller auf meinem hochauflösenden Retina Display oder 27" 8k Dell Monitor zu analysieren.

Auf welchen Browsertyp kommt das vor? Wenn auf Safari, dann ist das ein bekanntes Problem mit Safari der Shopify's React nicht korrekt rendert oder oder spezifische Webkit Anpassungen und Fallbacks, um Shopify-Shops korrekt zu rendern.

Es kann ggf. durch Anpassungen im CSS behoben werden wenn das Verhalten der Platzierung des Leerraums durch den derzeitigen CSS verursacht wird. Du kannst beispielsweise sicherstellen, dass das Haupt-Container-Element eine Flexbox ist und der Contentbereich die gesamte verbleibende Höhe einnimmt. Oder setze eine minimale Höhe für den Contentbereich, damit er mindestens die Höhe des Bildschirms einnimmt.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

[Kanarentrader]

Hallo,

die Sache passiert in Chrome, Edge und Firefox. Bei meinem 5K Monitor ist die Anzeigenskalierung bei 200%, da ist es nicht aufgefallen, nur beim ändern der Skalierung auf 150% ist dann die Lücke entstanden. Habe dann im theme.liquid in body min height von 100% auf 50% gesetzt. Jetzt ist zwar kein Zwischenraum mehr da aber der Footer hängt jetzt am Content und nach unten ist Luft. Wie nennt sich denn der Hauptcontainer?

[Gabe]

@Kanarentrader 

Kann ich nicht genau sage denn du hast keinen Link zu einem Beispiel bereitgestellt...oder ein Beispiel geliefert der 1) alle Parameter eurer Testumgebung zeigt, sowie 2) eine Live Demo des folgenden: "Bei meinem 5K Monitor ist die Anzeigenskalierung bei 200%, da ist es nicht aufgefallen, nur beim ändern der Skalierung auf 150% ist dann die Lücke entstanden."

Meine Tests im Dawn Theme haben diesbzgl. keine Ergebnisse ergeben und somit können wir dein gemeldetes Problem nicht reproduzieren.

Du kannst das aber an unseren Support senden und die werden das etwas naher 👀 müssen. Hast du bereits ein Ticket bei unserem Support-Team geöffnet? Verlange beim Support unbedingt von deinem 60-Min Design Time Gebrauch zu machen, dass du mit Dawn Free Theme bekommst!

Sende bitte eine E-Mail an unseren Support wie hier demonstriert von der E-Mail-Adresse, die du zur Anmeldung in deinem Shopify-Shop verwendest, und gib deine myshopify.com-URL da auch ein. Sobald die dein Konto authentifiziert haben, können sie dir weiterhelfen.

VG,

[Kanarentrader]

Hallo,

hier wäre mal ein Link: Shop 

Danke!

[Gabe]

@Kanarentrader 

Super danke und leider konnte ich es immer noch nicht reproduzieren wie du hier bei der Skalierung zu 150% sehen kannst auf voller 27" Breite:

Hier der Footer:

Welche genauen Änderungen hast du im Liquid des Dawn Theme alles ausgeführt, denn dein Theme Code sieht stark angepasst aus? Oder war das ein Developer oder eine Agentur?

Hast du es mit Flexbox probiert, um sicherzustellen, dass der Contentbereich die gesamte verbleibende Höhe einnimmt? Hier sind die Schritte zur Anpassung:

1. HTML-Struktur und den Container identifizieren: Basierend auf deinem Code scheint das main-Element den Hauptinhalt der Seite zu enthalten. Dieses Element könnte der Container sein, den du anpassen möchtest.

2. CSS-Anpassungen: Füge CSS hinzu, um Flexbox zu verwenden und das Layout zu korrigieren. Du solltest sicherstellen, dass das body-Element und das main-Element als Flex-Container fungieren und das main-Element die verbleibende Höhe einnimmt.

/* Setzt das body-Element als Flex-Container */
body {
  display: flex;
  flex-direction: column; /* Stellt sicher, dass die Kinder-Elemente (Header, main, footer) untereinander angeordnet sind */
  min-height: 100vh; /* Stellt sicher, dass das body-Element mindestens die volle Höhe des Ansichtsfensters einnimmt */
  margin: 0; /* Setzt den Standardabstand des body-Elements auf null */
}

/* Stellt sicher, dass das main-Element den verbleibenden Platz einnimmt */
main {
  flex: 1;
  display: flex;
  flex-direction: column; /* Dies ist optional, falls das main-Element selbst Kinder-Elemente hat, die ebenfalls vertikal angeordnet sein sollen */
}

/* Optional: Stellt sicher, dass der footer am unteren Rand bleibt, wenn nicht genug Inhalt vorhanden ist */
footer {
  margin-top: auto;
}

In der theme.liquid-Datei oder in einer CSS-Datei des Themes, füge das obenstehende CSS hinzu. Füge auch die folgenden CSS-Regeln hinzu:

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

Erklärung:

• body { display: flex; flex-direction: column; min-height: 100vh; margin: 0; }

  • display: flex;: Setzt das body-Element als Flex-Container, was eine flexible Anordnung der Kinder-Elemente ermöglicht.
  • flex-direction: column;: Ordnet die Kinder-Elemente (wie Header, main, footer) vertikal untereinander an.
  • min-height: 100vh;: Stellt sicher, dass das body-Element mindestens die Höhe des Ansichtsfensters einnimmt.
  • margin: 0;: Entfernt den Standardabstand des body-Elements.

• main { flex: 1; display: flex; flex-direction: column; }

  • flex: 1;: Lässt das main-Element den gesamten verbleibenden Platz im Flex-Container einnehmen.
  • display: flex;: Setzt das main-Element ebenfalls als Flex-Container (optional).
  • flex-direction: column;: Stellt sicher, dass die Kinder-Elemente des main-Elements vertikal angeordnet werden (optional).

• footer { margin-top: auto; }

  • margin-top: auto;: Schiebt das footer-Element nach unten, wenn nicht genug Inhalt vorhanden ist, um den verbleibenden Platz im Flex-Container auszufüllen.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Kanarentrader]

Hallo,

ich habe das Theme aus dem Shopify 1:1 übernommen. Hier mal ein Screenshot wenn ich bei meinem 5K Monitor von der empfohlenen Skalierung von 200% auf 150% runter gehe.

[Gabe]

@Kanarentrader 

Das scheint ein lokales Problem auf deiner Seite zu sein. Siehe meine Reproduzierung auf einen Hi-Res 27" Dell Monitor hier.

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

[Kanarentrader]

Hallo,

leider ist es nicht lokal, da mein Bruder in Deutschland mich erstmal auf diese Problematik gebracht hat. Wir werden dann Ihre Vorschläge ausprobieren und hoffen, dass es klappt.

Frohe Pfingsten!

[Gabe · Accepted solution]

@Kanarentrader 

Ja probiert das mal und nächste Woche ab Montag können wir das weiter 👁️!

Ebenfalls Frohe Pfingsten! 😉

[Kanarentrader]

Da sage ich mal ganz artig herzlichen Dank!