"Button" überlappen und verlassen Box

[Rolf B]

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()?

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:

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.

Rolf