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

[Iseda_Cares]

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

Hallo zu

[Gabe · Accepted solution]

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 · Accepted solution]

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 🙂

[r8r · Accepted solution]

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:

nachher:

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