Breakpoints ohne @media?

  • Hallo,

    ich arbeite gerade daran:
    https://codepen.io/nicerboy/pen/BeBmoN

    Leider schaffe ich es nicht, dass wenn man den Bereich rechts kleiner zieht, so auf circa 400px breite, (über die Resize-Linie in der Mitte), nur noch ein Bild pro Zeile erscheint.
    Mit Media Queries wäre das sehr einfach, aber wie lässt sich das ansonsten machen?

    Über Hilfe wäre ich sehr sehr dankbar!

    Grüße

  • Wow okay! Danke! Wie hast du das jetzt gemacht?
    Und wie ist es möglich, dass sich die eine Spalte dann von der Breite in den Raum einpasst?

  • erstens ist floaten Mist. Das macht viel probleme wenn man es nicht wirklich brauch.

    Dann den Bildern noch eine größe geben die das umbrechen erzwinkt. ( MIst erklärung)

    wenn die Bilder min-width:201px haben können erst ab 402px 2 Bilder nebeneinander.

    wenn man dann zb den Container wo die Bilder drinne sind ein

    max-width:600px; geben tut ,werden nicht mehr als 2 Bilder in einer reihe angezeigt weil das 3te Bild erst bei 603px da rein passen tut. Jetzt nur so als Beispiel mal neben bei.

    Und wie ist es möglich, dass sich die eine Spalte dann von der Breite in den Raum einpasst?

    meinst du das das Bild die volle Breite ausnutzen tut und Links und rechts kein so großer Platz mehr ist ?

    Da hatte ich auch schon drüber nachgedacht ,doch ohne @media oder Javascript fällt mir da nix ein.

    Vieleicht habe ich noch nicht meinen ganzen Speicher im Kopf ( kleiner als Gameboy )

    abgefragt und es gibt da auch noch nee möglickeit ,doch ohne @media und Js finde ich gerade nix

  • Zitat

    Leider schaffe ich es nicht, dass wenn man den Bereich rechts kleiner zieht, so auf circa 400px breite, (über die Resize-Linie in der Mitte), nur noch ein Bild pro Zeile erscheint


    Das wird heutzutage mit CSS-Grid und "minmax" erledigt.