Aufheben von Text-FLOAT um ein IMG im @MEDIA-Eintrag

Fredi Schmid · 13.07.2023

Hallo zusammen
Damit meine Website auf Smartphones gut aussieht, möchte ich dort den Textumlauf bei Bildern ab einer bestimmten Breite aufheben. Mit einem entsprechenden @media-Eintrag kriege ich das aber einfach nicht hin. Im Anhang habe ich dazu mein einfaches Beispiel. Die Hintergrundfarbe wechselt richtig, bei den "gefloateten" Bildern passiert aber nichts. Was muss ich codieren?
PS: Wieso kann ich keine HTML-Datei anhänen?
Besten Dank für einen guten Tipp.
Fredi

Sempervivum · 13.07.2023

Der Kern dieses Problems ist, dass Du einiges CSS, einschl. der float-Anweisungen, inline bei den betr. Elementen notiert hast. Das hat dann eine höhere Priorität bzw. Spezifität als die Anweisungen, die Du oben in den style-Tags definierst, einschl. der Mediaquery. Am besten alles inline-CSS löschen und in den style-Tags notieren. Hinzu kommt, dass eine ID eine höhere Spezifität hat als ein Tagname, d. h. was Du mit #links und #rechts definierst setzt sich gegenüber dem

Code:

img {
    float: none;
}

durch, obwohl Du letzteres danach notiert hast.
Näheres zum Thema Spezifität hier:
https://wiki.selfhtml.org/wiki/CSS/Tutorials/Einstieg/Kaskade#Spezifit.C3.A4t