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.. [Blockierte Grafik: https://i.imgur.com/qJ20t8P.png]

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


    [Blockierte Grafik: https://i.imgur.com/85dcfql.png]



    ich habe versuche mit diese Code das zu machen…


    Code
    1. @media screen and (min-width: 30em) {
    2. .dropdown a {
    3. float: left;}


    aber ohne erfolgt... kann jemand mir hilfe ? , danke !

  • Geil.

    Damit kann man gar nix anfangen

    Wir brauchen dein Html Teil . und die Komplette Css die dafür zuständig ist.

    An besten wäre ein Link zur Seite.

    Fals du das noch nicht Online hast dann schick uns mal deine Code ( Auch komplett wenn er nicht zu gross ist ) oder mach mal bei Codepen eine Demo fertig


    Dein Code

    @media screen and (min-width: 30em) {

    Sagt das der Bildschirm mindestens so groß sein muß bevor dieser Code was machen soll. Ich weiß ja nicht ganz genau aber 30em sind für Handy glaube ich soweiso zu groß

  • Danke für deine Antwort ! , meine Html und Css Code kannst du hier anzuschauert ,


    Zitat


    Ich weiß ja nicht ganz genau aber 30em sind für Handy glaube ich soweiso zu groß


    und was wäre auf deine Meinung das Beste Großer für Smartphonen ? sorry, aber ich bin ganz neu mit diesen Sachen... alles was ich jetzt weiss , habe gelernt die letzten zwei Monaten... ,

  • Zitat

    Aber dein erstes Bild geht hier irgendwie nicht.

    Was soll den jetzt genau passieren ?


    auf den Erste Bild zeigt wie meine Website auf ein Desktop siehst... , alles ist in Ordnung , nur habe gepostet um zu zeigen wie er aussiehst.. , meine probleme stehe bei dem "Smartphone" Bild .... ich möchte dass die Inneren Links nach Unten geöffnen werden...

  • Dein Menü ist ja jetzt Links neben den emailfeld. Soll da so bleiben ? Weil auf dein 2ten Bild ist es ja oben.

    Dein erstes Bild geht bei mir nicht da sehe ich nix.


    Also als erstes muß man wisen wo das Menü hinsoll. Links oder oben? Dann soll es immer da sein oder beim wechsel auf Handy wo anders hin

  • Das ist schon mal blödsinn

    Code
    1. nav li {
    2. display: block;
    3. display:inline-block;}

    Das hat bei footer kein sinn

    Code
    1. font-size: 2px;
    2. list-style-type: none;

    nur bei <li> und so .Und fontsize 2px hat sowieso kein sinn weil kann keiner Lesen.Da du im Footer dein <a> und <p> Tags noch mal extra Werte gibst kannst du diese Zeilen auch ganz weg lassen.


    Das kommt mir auch etwas Spanisch vor.Kann mich aber auch irren.Da muß ich selbst erstmal Goggeln

    Code
    1. font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;

    Beim Bild hast du größen Angaben iim html geschrieben das sollte man wenn möglich mit in der Css schreiben.

    ein leeres action="" im <form> bring auch nix.


    So jetzt zurück zu deinen Problem.Hast du schon geschrieben wie es aussehen soll???



    EDIT: Nee noch nicht dann warte ich noch etwas

  • Zitat

    So jetzt zurück zu deinen Problem.Hast du schon geschrieben wie es aussehen soll???


    Ich habe Teils geschrieben aber viele habe bei anden genohmen....



    Zitat
    1. nav li {
    2. display: block;
    3. display:inline-block;}

    hast du rechts , sie wiederholen zwei mal....


    Zitat

    Das kommt mir auch etwas Spanisch vor.Kann mich aber auch irren.Da muß ich selbst erstmal Goggeln


    font-family: Candara, Calibri, Segoe, "Segoe UI", Optima, sans-serif;


    Bei Spiel , ich habe Kopiert auf ein Code von Meine Html Kurs . Seit Juni bin ich Angemeldet auf ein Online-Kurs von der Volkshochschule und wir sollen dieser Website bauen ..... , was würdest du mich empfehlt für font-family ?


    was ich dich nicht Verstande habe ist


    Zitat

    Beim Bild hast du größen Angaben iim html geschrieben das sollte man wenn möglich mit in der Css schreiben.


    ich bedanke mich dich für deine bemühe ! , ich möchte jetzt korregiert deine vorschlage ,

  • Wenn du mir einmal vernünftig erklären könntest was du genau mit den Links vor hast könnte ich dir auch helfen.

    Ich muß wissen.

    1.wo sollen die Links hin.Über den Email formular oder Links daneben?

    2.Was sollen die Links den machen ? Sollen die beim hovern auf gehen ,oder ständig aufstehen.

    3.Nach wo sollen die aufgehen,nach unten oder leicht rechts versetzt?

    4. Soll das bei der Mobilen Ansicht genau so aussehen oder anders?


    aber erstal ist 1 wichtig weil du da verschiedene Angaben hast ,einmal dein Code und einmal dein Bild

  • Was ich machen möchte ist , NUR wechsel die Hove bei Smartphonen , Rechner und Tablet hove sind Gut. Auf den "Smartphone" [Blockierte Grafik: https://i.imgur.com/85dcfql.png]



    wenn der Maus auf dem Link Computer stehe , der Inneren links (link 1 , link 2 ,..) öffnen sich auf rechte seite , sie verstecken die anderen Links die auf nav stehen (News und Bucher) , ich möchte dass die Inneren Links von Computer , werden nicht auf Rechte seite geöffnet sonder Unten ...


    Zitat

    1.wo sollen die Links hin.Über den Email formular oder Links daneben?

    Über den Email formular... aber nur für Smartphone...

  • Wenn es dir nur darum geht das das Menü nicht die Obere Menüleleiste bedeckt dann brauchst du nur hier den Top Wert ändern

    Code
    1. .dropdown:hover .dropdown-content {
    2. display: block;
    3. left: 109px;
    4. top: 214px;
    5. }

    Schreib 230 Rein oder so das sollte dann reichen.Dann ist er zwar auch beim Laptop und co etwas tiefer aber das sieht trotzdem noch gut aus. Ansonsten schmeißt du diesen Code in ein @media queries rein der auf Smartphone größe eingestellt ist und dann ist er nur da etwas tiefer.Aber teste erstmal ohne @media ich denke das könnte schon reichen

  • Danke für deine hilfe , ich versuche mit @media , meine Idee ist für Desktop lassen wie ist .. , das probleme kommt mit @media ... , wenn ich schreibe dieses code :


    Code
    1. @media screen and (mind-width: 20) {
    2. .dropdown:hover .dropdown-content {
    3. display: block;
    4. left: 10px; /* zeigt wo dem innere link fenster gezeigt wird */
    5. top: 229px; /* zeigt wo dem innere link fenster gezeigt wird */
    6. }
    7. }

    es hat keine Beeinflusst auf "Smartphone" , wie das Bild zeigt [Blockierte Grafik: https://i.imgur.com/85dcfql.png]


    auch wenn an left , 10px Wert geben...

  • Ein mind-width und eine größen Angabe ohne Einheit gibt es nicht und funktioniert nicht


    Nimm den hier

    Code
    1. @media only screen and (max-width : 635px) {
    2. .dropdown:hover .dropdown-content {
    3. display: block;
    4. left: 309px;
    5. top: 284px;
    6. }
    7. }

    und setzt ihn am Ende der Css. Die grössen mußt du selber testen.Die größe ist jetzt an deine anderen größen angepasst wo das Navi den Platz ändert

  • ich bin jetzt zurückkehren von arbeit und habe deine Code gesehen... , viel danke für deine bemühst! , ich habe Ein Bissen deinen Parameter verendert... meine Code :



    Code
    1. @media only screen and (max-width : 635px) {
    2. <img src="https://i.imgur.com/fYU5wlD.png">
    3. .dropdown:hover .dropdown-content {
    4. display: block;
    5. left:10px;
    6. top:230px;
    7. }
    8. }


    und jetzt bekomme was ich möchte !! und beim Desktop alles bleibt wie möchte... , ich wünsche dir eine Schöne Woche !!


    [Blockierte Grafik: https://i.imgur.com/fYU5wlD.png]

  • Zitat

    Ich gehe mal davon aus das du den Code da nicht so stehen hast wie du ihn gepostet hast

    ich denke auch , ich habe verschiedenen Dateien mit "gleiche" Code .. , eine Frage.. Was macht die Unterschied zwischen habe deine Lösung Oben und an ende die CSS ... Oben funzioniert nicht aber Unten Ja , wenn beiden auf CSS Seite geschrieben werden ...

  • ich denke auch , ich habe verschiedenen Dateien mit "gleiche" Code .. , eine Frage.. Was macht die Unterschied zwischen habe deine Lösung Oben und an ende die CSS ... Oben funzioniert nicht aber Unten Ja , wenn beiden auf CSS Seite geschrieben werden ...

    Poste mal bitte den Code der nicht geht und den Code der geht,dann kann ich dir das auch beantworte weil so verstehe ich nur Bahnhof