Flexboxen & Media Queries

    Guten Abend :)

    Ich arbeite zurzeit an einem Projekt, das ich versuche mit Flexboxen umzusetzen. Zurzeit habe ich jedoch, das Problem dass die Media Queries nicht

    nicht berücksichtigt werden. Was habe ich falsch gemacht ?


    Kann ich prozentuale Angaben verwenden oder ist es besser flex: 1-5 zu verwenden ?

    Da kann man ja vor lauter schwarz kaum etwas erkennen ;-)


    Ein Kernproblem ist, dass Du dem Container #homepage eine feste Breite gegeben hast. Damit hebelst Du das Flexlayout insofern aus, als zwar die Verteilung der Breite von 3:1 passt, aber das Layout passt sich nicht an das Browserfenster an und man muss scrollen.


    BTW: Das Body-Element ist nicht tabu für Styling, man kann diesem ebenfalls ein display:flex geben und hat dann einen Container weniger.


    Was die Mediaquery betrifft, so ist mir nicht ganz klar, was Du damit erreichen willst. Naheliegend wäre ein vertikale Anordnung auf einem schmalen Bildschirm. Wolltest Du da vielleicht 100% statt 100px schreiben?

    Eine vertikale Anordnung kannst Du leichter erzielen, wenn Du das Layout auf flex-direction:column umschaltest.


    Edit: Ich sehe gerade, dass der schwarze Hintergrund dadurch kommt, dass ich die Hintergrundbilder nicht habe.

    Das verstehe ich nicht ;(

    Das Design verwendet Grafiken, welche eine feste Breite haben. Das Layout soll auf dem PC 1200PX breit sein und sich auf einem Mobilgerät entsprechend adaptieren. Vor Allem sind ja alle Werte relativ beziehen sich also auf etwas.


    Das heißt, dass ich das Body-Element als Wrapper verwenden kann ?



    Ja das sollte 100% heißen :)

    Ich möchte, dass sich alle Container auf dem Handy untereinander anordnen. Verwende ich dann flex-direction innerhalb der Media-Queries ?

    Zitat

    Ich möchte, dass sich alle Container auf dem Handy untereinander anordnen. Verwende ich dann flex-direction innerhalb der Media-Queries ?

    Dann war meine Vermutung ja richtig und die Verwendung von flex-direction:column in der Mediaquery wäre der beste Weg.


    Zitat

    Das Design verwendet Grafiken, welche eine feste Breite haben. Das Layout soll auf dem PC 1200PX breit sein und sich auf einem Mobilgerät entsprechend adaptieren. Vor Allem sind ja alle Werte relativ beziehen sich also auf etwas.

    Nicht jeder hat seinen Browser im Vollbild laufen, ich auch nicht und ich muss horizontal scrollen, um den Bereich rechts sehen zu können. Responsives Layout verstehe ich so, dass sich das Layout an die Breite des Browserfensters anpasst. Das schließt die Verwendung von Hintergrund-Grafiken nicht aus, es gibt CSS-Anweisungen um die Größe an den umgebenden Container anzupassen.

    Gern.


    Deaktiviert man die feste Breite für #homepage, so verschwindet die horizontale Scrollbar und man kann die Seite auf einen Blick erfassen.


    Und die vertikale Anordnung erreichst Du mit diesem CSS:

    Code
    1. @media screen and (max-width: 500px) {
    2. #row {
    3. flex-direction: column;
    4. }
    5. }


    Damit die Sidebar auch dann sichtbar ist, musste ich ihr eine min-height verpassen. Wenn erst Mal Inhalte drin sind, kann das entfallen.


    Code
    1. .sidebar {
    2. flex: 1;
    3. min-height: 470px;
    4. background-color: #000;
    5. }

    Was die HG-Grafiken betrifft, so müsste man wissen, wie Du dir die Anzeige vorstellst. Es gibt da ja diverse Varianten, gekachelt oder nicht gekachelt etc. Kannst Du sie vielleicht an dein nächstes Posting anhängen?

    Auf den Bildern kann ich leider gar nichts erkennen, da sind bei mir nur Schleier und Schatten.


    Zitat
    Komischerweise funktioniert es, wenn ich anstatt 1200PX einfach 62% verwende. Ich weiß aber nicht ob das richtig ist

    Richtig oder falsch ist hier weniger die Frage, sondern ob Du damit zu einer Darstellung kommst, die auf allen Monitoren gut aussieht. Wenn ich das mit den 62% ausprobiere, habe ich das Problem, dass bei schmalem Browserfenster, auch wenn die Mediaquery greift, links und rechts Platz verschenkt wird. Eine einfache Möglichkeit, beiden, schmalen und ganz breiten Browserfenstern gerecht zu werden, ist, max-width statt width zu verwenden. Dann ufert die Breite auf der einen Seite nicht aus und auf der anderen Seite wird bei schmalerem Browserfenster der verfügbare Platz ausgenutzt.

    Dankeschön :)

    Nach sowas wie max-width hatte ich gesucht. Das funktioniert gut.

    Funktioniert das mit flex-direction: colum; bei dir ? Bei mir möchte sich das Seitenmenü nicht unterordnen.

    Ja, das habe ich getestet und bei mir funktioniert es. In deinem Posting hast Du es falsch geschrieben

    flex-direction: colum;

    statt

    flex-direction: column;

    aber wahrscheinlich ist das nur ein Übertragungsfehler?

    Ja das ist ein Übertragungsfehler. Der Code ist soweit korrekt.


    Ich habe das jetzt auf dem Samsung Galaxy A7, iPhone 6 & zwei Monitoren getestet und Content & Sidebar werden nebeneinander dargestellt. Ich habe nur meine @media-screen durch deine ersetzt.

    Dieser Beitrag wurde bereits 1 Mal editiert, zuletzt von wakeme ()

    Sieht gut aus und funktioniert bei mir ebenfalls, wenn ich es per Copy&Paste in meine Testdatei übertrage.

    Versuche, auf dem PC das Browserfenster stark zu verkleinern in der Breite, ob er dann auf die vertikale Anordnung umschaltet. 500px kommen mir relativ gering vor, weil viele Handys ein hohe Auflösung haben.