Auf Thema antworten

Beitrag

[QUOTE="Sempervivum, post: 14760, member: 3917"]
Hallo,
da sind noch Fehler in deinem CSS, erst Mal hier:
[CODE=css]        /* Media Query für kleinere Bildschirme (z.B. Smartphones) */
        @media (max-width: 768px) {

/* !!! hier fehlte der Selektor: */
            nav ul {
                flex-direction: column;
                /* Links vertikal anordnen */
                align-items: left;
                /* Inhalt zentrieren */
            }

/* ... hier gekürzt */
           
            main p {
                font-size: 1rem;
                line-height: 1.4;
            }

/* !!! Hier fehlte die schließende Klammer: */
        }
[/CODE]Beachte die !!!
Es sind noch mehr Fehler. Um sie zu finden gibt es drei Möglichkeiten:
[LIST=1]
[*]Den Seiteninspektor deines Browsers benutzen:
[URL]https://wiki.selfhtml.org/wiki/Arbeiten_mit_dem_Seiteninspektor[/URL]
[*]Den CSS-Validator benutzen [URL]https://jigsaw.w3.org/css-validator/[/URL]
[*]Einen guten Editor benutzen wie Visual-Studio-Code, der zeigt dir dann die Fehler direkt an
[/LIST]
Was noch auffällt: Der Name deiner CSS-Datei lässt vermuten, dass Du nach dem Ansatz "Mobile first" vorgehen willst. Mit deiner Mediaquery [ICODE]        @media (max-width: 768px) {[/ICODE] machst Du jedoch das Gegenteil. Die andere Mediaquery [ICODE]@media screen and (min-width: 40em) {[/ICODE] geht wiederum in die entgegen gesetzte Richtung und benutzt außerdem eine andere Maßeinheit. Meine dringende Empfehlung: Entscheide dich für einen Ansatz, entweder "Mobile first" oder "Desktop first" und ziehe das konsequent durch.
[/QUOTE]

Authentifizierung