Hallo Kralle, das Problem tritt bei schmalen Viewports auf, unter 300px oder so. Nicht nur im Firefox, auch in Chrome. Ich habe erstmal diese Fehler gefunden: <meta name="viewport" content="width=device-width", initial-scale=1.0"> Das " hinter device-width muss weg, das Space hinter dem Komma würde ich auch wegnehmen. Und dann hast Du im CSS einige Angaben wie `0.5 em` drin. CSS folgt nicht der DIN für richtige Typographie von Einheiten. Die Einheit muss immer bündig an der Zahl stehen: `0.5em`. Weiter sollte man immer eine Mindestschriftgröße setzen. font-size: 2vw ist kritisch bei kleinen Viewports. Da muss etwas hin wie `clamp(12px,2vw,24px);`. Für Adleraugen. Für alte Säcke wie mich besser 16px bis 32px oder so. 😂 [Was ist clamp()?](https://wiki.selfhtml.org/wiki/CSS/Funktionen/clamp()) Jetzt der Grund für die Überlappung: Deine li sind display:inline. Damit liegen sie auf der Baseline für Text und der Rahmen schiebt sich drumherum. Nimm display:inline-block, oder mach aus dem ul eine Flexbox, so: ~~~css ul { display: flex; flex-flow: row wrap; list-style: none; } ~~~ Mit Flexbox nimm dann den display:*irgendwas* vom li weg und die list-style Angabe dort auch. Beim ul reicht die. Eine Einführung zu Flexbox [findest Du im Selfhtml Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox). _Rolf_ -- sumpsi - posui - obstruxi

Hallo Kralle, das Problem tritt bei schmalen Viewports auf, unter 300px oder so. Nicht nur im Firefox, auch in Chrome. Ich habe erstmal diese Fehler gefunden: <meta name="viewport" content="width=device-width", initial-scale=1.0"> Das " hinter device-width muss weg, das Space hinter dem Komma würde ich auch wegnehmen. Und dann hast Du im CSS einige Angaben wie `0.5 em` drin. CSS folgt nicht der DIN für richtige Typographie von Einheiten. Die Einheit muss immer bündig an der Zahl stehen: `0.5em`. Weiter sollte man immer eine Mindestschriftgröße setzen. font-size: 2vw ist kritisch bei kleinen Viewports. Da muss etwas hin wie `max(12px,2vw)`. Jetzt der Grund für die Überlappung: Deine li sind display:inline. Damit liegen sie auf der Baseline für Text und der Rahmen schiebt sich drumherum. Nimm display:inline-block, oder mach aus dem ul eine Flexbox, so: ~~~css ul { display: flex; flex-flow: row wrap; list-style: none; } ~~~ Mit Flexbox nimm dann den display:*irgendwas* vom li weg und die list-style Angabe dort auch. Beim ul reicht die. Eine Einführung zu Flexbox [findest Du im Selfhtml Wiki](https://wiki.selfhtml.org/wiki/CSS/Tutorials/Flexbox). _Rolf_ -- sumpsi - posui - obstruxi

Hallo Kralle, das Problem tritt bei schmalen Viewports auf, unter 300px oder so. Nicht nur im Firefox, auch in Chrome. Ich habe erstmal 2 Fehler gefunden, die aber keine Ursache für die Überlappung sind: <meta name="viewport" content="width=device-width", initial-scale=1.0"> Das " hinter device-width muss weg, das Space hinter dem Komma würde ich auch wegnehmen. Und dann hast Du im CSS einige Angaben wie `0.5 em` drin. CSS folgt nicht der DIN für richtige Typographie von Einheiten. Die Einheit muss immer bündig an der Zahl stehen: `0.5em`. Weiter sollte man immer eine Mindestschriftgröße setzen. font-size: 2vw ist kritisch bei kleinen Viewports. Da muss etwas hin wie `max(12px,2vw)`. Deine li sind display:inline. Damit liegen sie auf der Baseline für Text und der Rahmen schiebt sich drumherum. Nimm display:inline-block, oder mach aus dem ul eine Flexbox, so: ~~~css ul { display: flex; flex-flow: row wrap; list-style: none; } ~~~ Mit Flexbox nimm dann den display:*irgendwas* vom li weg und die list-style Angabe dort auch. Beim ul reicht die. _Rolf_ -- sumpsi - posui - obstruxi

Hallo Kralle, das Problem tritt bei schmalen Viewports auf, unter 300px oder so. Nicht nur im Firefox, auch in Chrome. Ich habe erstmal 2 Fehler gefunden, die aber keine Ursache für die Überlappung sind: <meta name="viewport" content="width=device-width", initial-scale=1.0"> Das " hinter device-width muss weg, das Space hinter dem Komma würde ich auch wegnehmen. Und dann hast Du im CSS einige Angaben wie `0.5 em` drin. CSS folgt nicht der DIN für richtige Typographie von Einheiten. Die Einheit muss immer bündig an der Zahl stehen: `0.5em`. Weiter sollte man immer eine Mindestschriftgröße setzen. font-size: 2vw ist kritisch bei kleinen Viewports. Da muss etwas hin wie `max(12px,2vw)`. Deine li sind display:inline. Damit liegen sie auf der Baseline für Text und der Rahmen schiebt sich drumherum. Nimm display:inline-block, oder mach aus dem ul eine Flexbox. _Rolf_ -- sumpsi - posui - obstruxi