Marcel: display:flex Fragen / Probleme

Beitrag lesen

SELF-Forum

display:flex Fragen / Probleme

Marcel
– Informationen zu den Bewertungsregeln

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>`
Beitrag melden
–
Informationen zu den Bewertungsregeln