liebewinter: Media Query arbeite nicht

ich versuche zu testen meine Website in Smartphones , in Chrome gibt es eine Mobile Browser Emulator .Ich habe geschrieben ein Code dass die Links auf rechte seite geöffnet werden , wie das Bild zeigt..

Auf den Browser wenden die links auf rechte seite geoffnet

Was jetzt versuche ist dass die Links in Smartphones Unten geöffnet werden... , das Bild zeigt wie jetzt die Links geöffnet werden…

Bild zeigt wie jetzt die Links bei Smartphone geöffnet wird

ich habe versuche mit diese Code das zu machen…

@media screen and (min-width: 30em) { #externalLinks a { text-decoration: none; display: block; text-align: center; font-size: 15px; font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif; } li a, .dropbtn { display: block; color: #000; padding: 8px 16px; text-decoration: none; } }

aber ohne erfolgt..., kann Bitte jemand mir hilfe und dieses Probleme zu lösen , Danke !

  1. @@ liebewinter

    ich versuche zu testen meine Website

    Du hast vergessen, den Linkk zu deiner Website anzugeben, damit wir sie auch testen können.

    LLAP 🖖

    -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
    1. Du hast vergessen, den Linkk zu deiner Website anzugeben, damit wir sie auch testen können.

      Entschuldigung , hier ist das Code ,

      1. hallo

        Du hast vergessen, den Linkk zu deiner Website anzugeben, damit wir sie auch testen können.

        Entschuldigung , hier ist das Code ,

        .dropdown { position:relative;} .dropdown:hover dropdown-content, .dropdown:focus-within dropdown-content { top:1.5em; left:0;} -- Neu im Forum! Signaturen kann man ausblenden!
        1. Danke für deine Antwort ! , ich habe deine Code so geschrieben :

          @media screen and (min-width: 30em) { .dropdown { position:relative;} .dropdown:hover dropdown-content, .dropdown:focus-within dropdown-content { top:1.5em; left:0;} grid-template-columns: repeat(3, 200px 1fr 200px); } }

          aber der header schwinden und die links werden unten geöffnet wie das Bild zeigt..

          neue code für smartphone

          1. so , ich weiß wo das Fehler war... es fehlte das Wort a ... das code :

            @media screen and (min-width: 30em) { .dropdown a { position: relative;} .dropdown:hover dropdown-content, .dropdown:focus-within dropdown-content { top: 1.5em; left: 0em;}

            auf Desktop bleibt gleich wie frühe hatte und ich möchte , beim "Smartphone", bekomme dieses Bild :

            bild smartphone

            habe nicht die möglichkeit die beim Smartphone gleiche aussieht wie auf Desktop ?

          2. @@ liebewinter

            die links werden unten geöffnet

            Nein, werden sie nicht – nicht bei Bedienung mit Tastatur.

            Es genügt nicht, auf :hover zu reagieren, was nur bei Bedienung mit Maus (o.ä. Zeigegeräten) reagiert.

            Wenn du .dropdown:hover .dropdown-content erweiterst zu
            .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content,
            dann funktionierts auch mit Tastatur – zumindest in Browsern, die :focus-within unterstützen (Edge ist noch nicht mit dabei).

            LLAP 🖖

            -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann
            1. danke für deine Code , aber ich habe andere gefunde die passt besser auf meine frage , der Code :

              @media only screen and (max-width : 635px) { .dropdown:hover .dropdown-content { display: block; left:10px; top:230px; } }

              und hier das Bild …

              Bild von dem Smartphone

              und bei Desktop bleibt wie ich möchte... Tut mir leid für meine Späteter Antwort ...

              1. @@ liebewinter

                danke für deine Code , aber ich habe andere gefunde die passt besser auf meine frage

                Meine Ergänzung am Code war auch nicht für deine Frage, die du gestellt hattest.

                Sie war für eine Frage, die du nicht gestellt hattest. Nämlich: Wie mache ich meine Seite benutzbar?

                (Benuztbar heißt nicht nur mit Maus benutzbar, sondern auch mit Tastatur.)

                Dehalb nochmal: Es genügt nicht, auf :hover zu reagieren, was nur bei Bedienung mit Maus (o.ä. Zeigegeräten) reagiert.

                Wenn du .dropdown:hover .dropdown-content erweiterst zu
                .dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content,
                dann funktionierts auch mit Tastatur – zumindest in Browsern, die :focus-within unterstützen (Edge ist noch nicht mit dabei).

                LLAP 🖖

                -- „Wer durch Wissen und Erfahrung der Klügere ist, der sollte nicht nachgeben. Und nicht aufgeben.“ —Kurt Weidemann