Bildschirmbreite wird nicht über Bildschirmbreite sondern über eingebettetes Bild definiert. Wo ist der Fehler?

    Liebe HTML-CSS-Webmaster-Community,

    nachdem schon einige Leute meine Homepage vermisst haben, dachte ich mir: Jetzt musst ich aber mal ran.

    Ich komme aber an einem Punkt nicht weiter:

    Die Seite joseph-grauel.de ist bewusst sehr schlicht aufgebaut. Zu Beginn kommt ein Bild und danach etwas Text.

    Für die Anpassung der Textgröße an das Endgerät sind im head der html ein paar CSS-Style-Angaben. Bspw. diese:

    Code
                 @media screen and (max-width: 400px){
                div.text {
                    font-size: 2em; margin: 1em; line-height: 125%; max-width: 100%;
                }
            }


    Mein Problem ist, dass diese Style-Einstellung nicht wirkt. Das liegt vermutlich daran, dass im <body> als erster Eintrag das Foto eingesetzt ist und dieses Foto dazu führt, dass das falsche CSS-Style gewählt wird.

    Code
             <a href="/media/start.jpg" target="_blank">
            <img src="/media/start.jpg" alt="Joseph Grauel - copyright Hanno Müller" width="100%">
        </a>

    Im Inspektor von Firefox wird mir angezeigt, dass die Größe des Bildes=body=html=die Displaygröße ist. Da das Bild 900px Breite hat, greift der oben genannte CSS-Style nicht. Erst wenn ich im Inspektor die Größe des Fensters manuell verändere, wird der korrekte CSS-Style angewendet.


    Was kann ich tun, dass der CSS-Style anhand der tatsächlichen Displaygröße und nicht des Bildes ausgewählt wird? Meine html habe ich mal angehängt. Für Tricks und Tipps wäre ich euch sehr dankbar!


    Vielen Dank und viele Grüße,

    Joseph

    Zitat

    Das liegt vermutlich daran, dass im <body> als erster Eintrag das Foto eingesetzt ist und dieses Foto dazu führt, dass das falsche CSS-Style gewählt wird.

    Nee das ist egal bei deiner Css.

    Schreib mal das in head rein

    Code
      <meta name="viewport" content="width=device-width, initial-scale=1">