Flexboxprojekt reponsive erst ab 700px

  • So das Galerieprojekt ist erstmal zufrieden beendet

    Jetzt habe ich ich Problem mit einer Flexbox in der es 2 weitere Flexboxen gibt. Die @media macht ja erst ab 700px reponsive.

    Das liegt wahrscheinlich daran, dass meine Idee war für box1 65% und box2 35% vorgegeben habe.

    Was kann ich da besser machen

    einzusehen unter miflo.de

  • Worin besteht denn das Problem genau? Wenn ich die Breite des Browserfensters ändere sieht es auch unter 700px ganz ordentlich aus, nur am Übergang zuckt es ein wenig.

    Du benutzt für flex Prozentwerte, das war mir neu weil ich bisher nur dimensionslose Werte genommen hatte. Aber Browser und VS-Code akzeptieren es und ich musste erst nachlesen, wie sie es interpretieren. Bin dann hier fündig geworden:

    CSS Reference Guide: flex - LogRocket Blog
    The CSS flex property is a shorthand for setting how flexible items will grow or shrink to fill their parent container.
    blog.logrocket.com

    Demnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?

  • Worin besteht denn das Problem genau?

    Nun ja auf einem Ipad sieht die Seite sch... also bescheiden aus. Muss es mal mit Chrome testen vielleicht liegt es auch an meinem Brave Browser

    Zitat


    Demnach wird ein Prozentwert als flex-basis interpretiert. flex: 1000%; macht aber IMO keinen Sinn, was willst Du denn damit erreichen?

    das war ein Fehler sollten 100% sein.

    Wie würdest du das das Machen 2 Boxen mit 2/3 und 1/3 Aufteilung. Also so ungefähr.

    Den Link von dir Zieh ich mir mal rein

  • Zitat

    Nun ja auf einem Ipad sieht die Seite sch... also bescheiden aus.

    Was meinst du damit? Das sich die Grafik verzerrt? Das liegt nicht am Browser sondern an deinen CSS-Angaben.

  • Das hat gut geklappt

    Die Bildverzerrung habe ich mit align-items : center; hinbekommen.

    Was muss ich in die media querry eintragen, damit box2 (flex-itiem-left) nich aus dem flex-container sptingt

    siehe

    about2.jpeg

  • Auch hier hilft es weiter, konsequent auf Flex zu setzen: Statt in der Mediaquery auf Wrapping umzuschalten, die Richtung auf column setzen:

    Code
    @media (max-width: 770px) {
        .flex-container {
            /* flex-wrap: wrap; */
            margin-bottom: 25px;
            flex-direction: column;
        }
    }

    Dann gibt es noch eine Spezialität bei Flex: Der Default für min-width und min-height ist auto, d. h. Bilder können nicht unter ihre natürliche Größe schrumpfen. Also diese auf einen sehr kleinen Wert setzen:

    Code
    .flex-item-right img {
        min-width: 1px;
        min-height: 1px;
    }
  • Das mit dem .flex-container hatte ich auch schon probiert

    Aber dann werden die -flex-items, außerhalb der @media querry nicht mehr als row angezeigt.

    Habs mal neu hochgeladen, dass du sehen kannst was ich meine

    miflo.de

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!