Relative Bildbreite in mobilen Browsern ⇐ HTML

[Anonymous]

Als ich mir diese Beispiel-Webseite ansah (siehe unten den Code), stellte ich fest, dass das Bild auf der linken Seite der Seite in meinen mobilen Browsern (Firefox und Chrome) mit einer Breite von Null angezeigt wird, während es in denselben Browsern auf meinem Laptop eine korrekte Breite hat.
Der Webseitencode wird von W3 korrekt für HTML und CSS validiert.
Die einzige Möglichkeit, das Bild in mobilen Browsern anzuzeigen, scheint stattdessen die Verwendung einer festen Breite für das Bild zu sein von relativen, aber diese Lösung gefällt mir nicht.
Kann mir jemand dabei helfen, irgendetwas zu erraten, um dieses Verhalten zu erklären?
hier der HTML-Code:

Code: Select all

TITLE




TEXT





TEXT
TEXT
TEXT


TEXT
TEXT
TEXT


TEXT

und hier das CSS:

Code: Select all

body {margin:1em auto;width:90%;background-color: #ebf1dd}    div {padding: 6px}
.fasciaSx {
text-align:justify;
}
.primaRiga .colonna {
margin: 0 2em;
}
.riga .colonna {
margin: 0 2em;
}
.contenitore {display:flex; text-align:center;}
.fasciaSx {flex: 15%}
.fasciaDx {flex: 85%}
.primaRiga {display:flex; text-align:center;
flex-direction: row;
}
.riga {display:flex; text-align:justify;
flex-direction: row;
}
.colonna {flex: 33%;}
.dx, .sx  {background-color: #f2e7a0}
.cx  {background-color: #e4f6a4}