FROM CACHE - de_header

Lässt sich die Seite für eine Ansicht im Querformat sperren?

Gelöst
Iseda_Cares
Neues Mitglied
2 0 0

Hallo zusammen, 

Seit 1. April läuft mein Store für Naturkosmetik, isedacares.com mit dem Prestige Theme.

In der Mobile Version (querformat) hab ich leider das Problem dass es irgendwie komisch aussieht, die Element ineinander laufen sozusagen.

Ich wäre dankbar für einen Tipp wie ich das beheben kann.

 

Danke vorab und LG, Joseph

 

 

Screenshot_20210426_201314_com.microsoft.emmx.jpg

 

 

Hallo zu

2 AKZEPTIERTE LÖSUNGEN

Anerkannte Lösungen
Gabe
Shopify Staff
Shopify Staff
7622 1216 1999

Erfolg.

Hey @Iseda_Cares 

Danke für die Angaben und da wollte ich fragen, ob das Problem noch besteht? Ich habe das jetzt getestet und bin keine Probleme begegnet wie man hier sieht:

Wenn das Problem noch besteht scheint das ein Bug im Prestige Theme zu sein, dass die Theme Entwickler gerne anschauen können und die kannst du hier erreichen.

Lass wissen, ob ich deine Frage damit beantwortet habe 🙂

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Lösung in ursprünglichem Beitrag anzeigen

r8r
Shopify Expert
2350 305 835

Erfolg.

Joseph @Iseda_Cares – ja das geht, aber das wäre mit Kanonen auf Spatzen geschossen.

Dein Problem fußt nicht darauf, dass die Seite im Querformat nicht funktioniert, sondern darauf, dass der Header nicht mit mobile first im Hinterkopf gestaltet wurde. In einem Szenario, bei dem die Seitenhöhe gering (in dem Fall hab ich mal 440px angenommen) ist, finden die Elemente nicht mehr genug Platz um eine ordendliche Darstellung zu gewährleisten.

Ich würd vorschlagen, bei geringer verfügbarer Höhe, den Text im Header-Slider anders zu formatieren oder ganz auszublenden. Z.b. so:

 

@media screen and (wax-width: 640px) and (max-height: 440px) {
  header.SectionHeader > h2, header.SectionHeader > h3 {
    display: none;
  }
}

 

vorher:

Screenshot 2021-04-28 at 08.56.32.jpg

nachher:

Screenshot 2021-04-28 at 08.57.19.jpg

Um auf Deine ursprüngliche Frage zurückzukommen: Du kannst z.B. auch alle Elemente ausblenden, wenn Die Ansicht im Querformat ist (und die Mindesthöhe von 440px nicht überschritten wird) – das wäre dann dieser Code:

 

@media screen and (wax-width: 640px) and (max-height: 440px) and (orientation: landscape) {
  * {
    visibility: hidden;
  }
}

 

Empfehlen würd ich das nicht  – und du solltest dann zumindest ein Element im Code ergänzen, das den Besucher*innen anzeigt oder beschreibt, dass sie den Bildschirm um 90° drehen müssen um etwas zu sehen.

Liebe Grüße,
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte

Lösung in ursprünglichem Beitrag anzeigen

2 ANTWORTEN 2
Gabe
Shopify Staff
Shopify Staff
7622 1216 1999

Erfolg.

Hey @Iseda_Cares 

Danke für die Angaben und da wollte ich fragen, ob das Problem noch besteht? Ich habe das jetzt getestet und bin keine Probleme begegnet wie man hier sieht:

Wenn das Problem noch besteht scheint das ein Bug im Prestige Theme zu sein, dass die Theme Entwickler gerne anschauen können und die kannst du hier erreichen.

Lass wissen, ob ich deine Frage damit beantwortet habe 🙂

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

r8r
Shopify Expert
2350 305 835

Erfolg.

Joseph @Iseda_Cares – ja das geht, aber das wäre mit Kanonen auf Spatzen geschossen.

Dein Problem fußt nicht darauf, dass die Seite im Querformat nicht funktioniert, sondern darauf, dass der Header nicht mit mobile first im Hinterkopf gestaltet wurde. In einem Szenario, bei dem die Seitenhöhe gering (in dem Fall hab ich mal 440px angenommen) ist, finden die Elemente nicht mehr genug Platz um eine ordendliche Darstellung zu gewährleisten.

Ich würd vorschlagen, bei geringer verfügbarer Höhe, den Text im Header-Slider anders zu formatieren oder ganz auszublenden. Z.b. so:

 

@media screen and (wax-width: 640px) and (max-height: 440px) {
  header.SectionHeader > h2, header.SectionHeader > h3 {
    display: none;
  }
}

 

vorher:

Screenshot 2021-04-28 at 08.56.32.jpg

nachher:

Screenshot 2021-04-28 at 08.57.19.jpg

Um auf Deine ursprüngliche Frage zurückzukommen: Du kannst z.B. auch alle Elemente ausblenden, wenn Die Ansicht im Querformat ist (und die Mindesthöhe von 440px nicht überschritten wird) – das wäre dann dieser Code:

 

@media screen and (wax-width: 640px) and (max-height: 440px) and (orientation: landscape) {
  * {
    visibility: hidden;
  }
}

 

Empfehlen würd ich das nicht  – und du solltest dann zumindest ein Element im Code ergänzen, das den Besucher*innen anzeigt oder beschreibt, dass sie den Bildschirm um 90° drehen müssen um etwas zu sehen.

Liebe Grüße,
Mario

★ Ja, man kann mich buchen; schreib mir eine Nachricht!
★ Hinterlass gerne ein Like und markiere meine Antwort gegebenenfalls als Lösung. Ich freue ich mich immer über eine Spende an die (Kinder)krebshilfe oder eine kleine Aufmerksamkeit.
Studio Mitte