responsive mobile - column wrap funktioniert nicht.

  • HI Leute,


    ich versuche die Seite dazu zu bringen, dass ich bei aufrechter Haltung des Handys 1 Spalte habe und beim quer halten / bzw. Verwendung von einem Tablet 2 Spalten habe.
    Leider habe ich immer entweder nur 1 Spalte bei beidem oder aber bei aufrechter haltung 1 Spalte, die aber genau wie beim quer halten nur 50% des Display füllt.
    Ich hab mich nur mit tutors etc. soweit gehangelt, da ich ewig keine HP mehr gebaut habe und dies meine 1. mobile optimierte Seite werden soll.
    Vermutlich fehlt mir nur irgendwo ein code-Schnipsel oder etwas Feintuning. Bitte helft einem Dinosaurier, hab das letzte Mal eine Homepage gebaut als man noch mit Tabellen gearbeitet hat.^^ hab aktuell die CSS im Head, das wir natürlich noch geändert sobald es funzt.
    Hatte schon die externe css im verdacht vom navi script, aber diese zu entfernen zerlegt nur die Formatierung des obersten Balkens der Navigation, ansonsten hat sich nichts geändert...



    Version 1: immer nur 1 Spalte:


  • Da man deinen Code auf keiner Seite ansehen kann, Onlinelink fehlt, fiel mir nur eines auf.
    Im CSS deklariert man erst allgemeine Angaben, dann mit @media screen die Ausnahmen. Das scheint bei dir anders zu sein. ;-)

    Gegen Mods kommt man nicht an, die haben immer Recht. Sind scheinbar nicht kritikfähig.

  • Hallo hadi_macht_peng


    Deine Vorstellungen von aktuellem HTML und CSS sind schlicht falsch.


    So gibt es keine media-Angaben die für bestimmte Endgeräte stehen. Viele media-Angaben haben sich in der Praxis zudem als hinderlich erwiesen und sollten nicht verwendet werden. Grade viele Anfänger sind leider immer noch der Ansicht, alle CSS-Angaben ließen sich sinnvoll verwenden.


    Die media-Angaben sollten sich immer auf den Inhalt beziehen und nicht mit Endgeräten in Verbindung gebracht werden.


    Auch überfordert die gleichzeitige Verwendung von max-width und min-width viele Webseitenersteller. Das ist nicht notwendig und sollte vermieden werden. In der Praxis haben sich entweder nur die Verwendung von max-width (Desktop First) oder nur die Verwendung von min-width (Mobile First) bewährt.


    Zudem erscheint mir eine zweispaltige Darstellung ab 400px Breite ziemlich sinnfrei, außer eine Spalte ist deutlich schmaler als die andere. Je nach Inhalt ist eine zweispaltige Darstellung erst ab 500px oder noch mehr sinnvoll.


    Zitat

    Bitte teste mal, ob ...


    Sollten nicht erst mal die Fehler und unsinnigen Konstruktionen beseitigt werden? Zum Beispiel den Quelltext nach den HTML5-Regeln erstellen, wenn HTML5 für den Browser vorgegeben wird? Und was ist mit Angaben wie



    Gruss


    MrMurphy