Flexboxprojekt reponsive erst ab 700px

Emess

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

CSS

/*-------------------------------------------
...............About.........................
--------------------------------------------*/


#about
{
    min-height: 100vh;
    background-color:grey;
    justify-content: flex-start;
}

#about>p
{
    font-weight: bold ;
    color: fff;
    width: 70%;
}
#about>h1{
    font-family: Arial, Helvetica, sans-serif;
    color:moccasin;
}

/* flexbox specific styles*/ 
.flex-container {
    width: 80%;
    padding: 5px;
    display: flex;
    flex-direction: row; /* Default */
    gap: 1em 2em;
    justify-content: center;
    background: yellowgreen;
  }
  
  .flex-item-left{
    justify-content: center;
    padding: 10px;
    font-family: sans-serif;
    font-size: 2em;
    color: #333;
    flex:65%;
    /* background: gray; */
    background: burlywood;
  }
.flex-item-left>h1{
    font-size: 0.5em;
    align-content: center;
}
  .flex-item-right{
    display: flex;
    justify-content: center;
    padding: 10px;
    font-family: sans-serif;
    font-size: 2em;
    color: #333;
    flex:35%;
    /* background: gray; */
    background: lightblue;
  }

@media (max-width: 700px) {
    .flex-item-right, .flex-item-left {
      flex: 100%;
      justify-content: center;
      font-size: 1em;
     
    }

    .flex-container{
        flex-wrap: wrap;
        margin-bottom: 25px;
    }
}

Alles anzeigen

einzusehen unter miflo.de

Sempervivum

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?

Emess

Zitat von Sempervivum

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

MrMurphy

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.

Sempervivum

Zitat

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

Das ist sehr einfach zu machen: Linke Box flex: 2; und rechte Box flex: 1;.

Emess

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

Sempervivum

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;
}

Emess

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

Sempervivum

Vermutlich ein Schreibfehler: @media (max-width: 7700px)

Emess

Oh Mann! wie peinlich! Schon wieder!

Flexboxprojekt reponsive erst ab 700px

Jetzt mitmachen!

Tags