Layout Maximalbreite = Minimalbreite

Hallo zusammen,

ich hatte meinen Shop bisher immer auf 1400px Breite. Nun wollte ich es auf 1600px erhöhen, dabei ist mir aufgefallen, dass die Maximalbreite im Styleedit 4 auch gleichzeitig die Minimalbreite ist. Das ist ziemlich ungünstig, da der Shop unter 1600px in den Landscape schaltet und das ist dann etwas zu schmal

Kann man das irgendwie entkoppelt? Also das Landscape wirklich erst unter 1200px aktiv wird?

 

Ja das ist ja das von mir festgestellte Resultat aus der Eingabe.
Suggerieren tut die Einstellmöglichkeit aber, dass hier hier die maximale Anzeigebreite angeben kann und die sollte nicht mit der Minimumbreite für die PC Ansicht gekoppelt sein.

Breakpoint PC = wie bei den anderen fest bei z.b. 1200px (oder eben ebenfalls Einstellbar)
Maximalbreite = abhängig von der Eingabe des Shopbetreibers, bzw halt vom Browser. Die Maximalbreite soll die Minimumbreite nur dann tangieren, wenn sie unter der festen Minimumbreite ist.

Ich kann die Frage auch anders stellen: Wo gebe ich die maximale Shopbreite ein, ohne das zu früh in den Landscape geschaltet wird

 

Nein möchte ich nicht, das wäre nur ein Flicken auf einem unnötigen Loch. Ich glaube Du verstehst nicht ganz worauf ich hinaus möchte. Ich bin selber Programmierer, ich kann es so hinbiegen das es passt, es ist und bleibt aber in meinen Augen ein Fehler.

Wilkem sieht es wohl genau so: https://www.gambio.de/forum/threads...i-darstellung-zu-verstehen.39108/#post-341500

Ich versuche es mal anders zu erklären.

Wir haben eine Autobahn wo maximal 120km/h zugelassen ist. Du fährst einen ein Auto das 140km/h fahren kann, aber du darfst trotzdem nur 120km/h fahren und fährst auf der 2. Spur. Damit kann man leben.

Spur 1 -> maximal 100km/h erlaubt. (Landscape)

Spur 2 -> für Autos die mindestens 120km/h fahren können. (Full-HD Monitor)

Nun sagt der Admin der Autobahn, lasst uns doch die Autobahn auf die maximale Geschwindigkeit 160km/h (1600px) erhöhen, die erste Spur bleibt aber bei 100km/h.

Richtige Lösung:

Spur 1 -> maximal 100km/h erlaubt (Landscape)

Spur 2 -> für Autos die mindestens 120km/h fahren können, dürfen aber auch nur maximal 160km/h fahren.

Du darfst also weiterhin auf beiden Fahrspuren fahren, für Dich hat das keine Nachteile, bzw. du darfst nun 140km/h fahren.

Beim Shop ist es nun so:

Spur 1 -> maximal 100km/h erlaubt. (Landscape)

Spur 2 -> für Autos die mindestens 160km/h fahren können, dürfen aber auch nur maximal 160km/h fahren.

Das heißt für dich, du fährst ab sofort nur noch auf Spur 1, weil die zweite Spur nur führ Fahrzeug ab 160km/ist.

 

Ich glaube wir beide kommen nicht auf einen Punkt, da jeder was anderes im Kopf hat.

Ich weiß nicht mehr wie ich es dir noch Sinnbildlicher erklären soll, dass Du verstehst was ich meine ;D Ich verstehe deinen Ansatzpunkt, aber der ist in meinen Augen nur ein flicken und löst den Fehler nicht.

Letzter Versuch, vielleicht mischt sich ja auch noch jemand anderes ein, der versteht was ich meine oder ebenfalls sagt, dass ich einen knacks im Kopf habe

Wir haben 3 Breakpoints:

@media (min-width: 768px) -> Handy
@media (min-width: 992px) -> Tablet
@media (min-width: 1200px) -> PC

Unterschreiten wir diese Breakpoints, schält der Shop in den nächst tieferen. Soweit alles gut.

Wo ist nun mein Problem? Mein Problem ist, dass der PC 1200px Breakpoint nicht mehr fest definiert ist. Dieser (im Code $screen-lg-min genannt) wird an einer Stelle im Code durch $screen-lg definiert. Die Variable $screen-lg wiederum wird durch den Wert "Maximalbreite" im StyleEdit definiert. Resultat -> alle haben den selben Wert.

Somit passiert nun folgendes: Wenn man den wert "Maximalbreite" erhöht, dann verschiebt sich auch der Wert $screen-lg-min und es klafft ein riesen Loch zwischen Tablet und PC. Bei 1600px sieht das dann statisch gesehen so aus:

@media (min-width: 768px) -> Handy
@media (min-width: 992px) -> Tablet
@media (min-width: 1600px) -> PC

Wenn Deine Auflösung nun zwischen 992 und 1600px liegt, dann wird dir immer Landscape angezeigt. (bei ner 1440px Auflösung ist dass nur noch ein schmaler Strich in der Mitte).
Jetzt sind wir aber im Zeitalter von Responsiveness und wollen das auch sichtbar haben, haben wir aber nicht, da die Maximalbreite gleichzeitig auch die Minimalbreite ist. Wir spingen also nur zwischen Handy, Table und PC hin und her. (Empfinde ich nicht als Responsiveness)

Wie ist nun die Lösung? Wie die professionelle Lösung ist, keine Ahnung bin nur Hobbyprogrammierer. Meine Lösung ist aber folgende und die funktioniert so:

Ich habe $screen-lg-min statisch auf 1200px gesetzt, somit habe ich wieder einen Breakpoint, das bringt jedoch nicht viel, wenn die Breite mit css fest auf $screen-lg (im StyleEdit auf 1600px) vorgegeben ist. Deswegen habe ich "width" gegen "max-width" ersetzt.

Das Ergebnis:

Mein Shop hat eine Maximalbreite von 1600px, wenn der Browser eine höhere Auflösung hat. Zwischen 1600px und 1200px passt sich der Shop flexible auf die jeweilige Maximalbreite des Browsers an. Erst wenn ich unter 1200px komme, dann kommt der Spung zur Tabletauflösung.