nicht angemeldet
display:flex Fragen / Probleme
Hallo,
bei dem folgenden Code verhält es sich im Browser anders als am Smartphone Und zwar ist es so, das wenn man das Browserfenster zusammen zieht, "daten" unter "bild" rutscht und darunter "rechts" erscheint. Genau so ist es auch erwünscht.
Am Smartphone verhält es sich aber leider anders. Es rutscht zwar "daten" unter "bild" aber "rechts" bleibt rechts neben "daten".
Hat jemand eine Idee was genau ich hier falsch gemacht habe?
Bedanke mich vorab für jeden Tipp!
Gruß Marcel
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--Viewport einstellen-->
</head>
<body>
<header>
Header<br>
</header>
<div class="row">
<div class="bild" bgcolor="<?php echo $bgcolor; ?>">
Bild
</div>
<div class="daten">
Artikel Beschreibung
</div>
<div class="rechts">
VK + Bestell Button
</div>
</div>
<footer>
Footer
</footer>
</body>
`<style>
.row{
display : flex;
flex-flow : row wrap;
flex-direction : row;
margin-top : 2em;
padding : 1em;
max-width : 100%;
width : 100%;
border : 0.07em solid #CCCCCC;
}
.bild{
flex : 1;
margin : 0.5em;
margin-right : 2em;
max-width : 10em;
border : 1px solid green;
}
.daten{
flex : 1;
border : 1px solid yellow;
}
.rechts{
flex : 1;
width : auto;
border : 1px solid red;
}
</style>
</html>`
-
Hallo,
das hat sich erledigt. Eine media Abfrage und ein min-width: 100% bei bild, daten und rechts und es hat funktioniert. Die einzelnen items hatten einfach nicht die notwendige Breite. Und das es im Browser funktioniert hat, lag ganz einfach daran, das ich den weiter zusammenziehen konnte als die Breite vom Smartphone ist.
Also alles gut!
Gruß Marcel