Media Query arbeite nicht

[liebewinter]

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..

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

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 !

[Gunnar Bittersmann]

@@ liebewinter

ich versuche zu testen meine Website

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

LLAP 🖖

[liebewinter]

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

Entschuldigung , hier ist das Code ,

[beatovich]

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;}

[liebewinter]

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..

[liebewinter]

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 :

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

[Gunnar Bittersmann]

@@ 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 🖖

[liebewinter]

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 …

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

[Gunnar Bittersmann]

@@ 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 🖖