Responsive Reaktion bei schmalem Display

  • Hallo Leute,

    ich spiele mich schon seit 2 Tagen mit einem responsive Design, welches auf breiten Displays 2 Blöcke nebeneinander darstellt (links Modeldaten, rechts Foto). Dabei soll der Block "box_size" auf der Unterkante des Fotos abschließen, unabhängig davon, wieviele Zeilen er beinhaltet (vertical-align: bottom oder bottom: 0px), was ich aber nicht hinbringe.


    Wird das Browserfenster in der Breite verkleinert, springen die Blöcke um, wobei einige Layoutänderungen erfolgen sollen:

    • Der Leerraum vor Block "box_name", zwischen "box_name" und "box_size" und nach "box_size" soll verschwinden. Letzterer wird wahrscheinlich durch korrektes Anbringen von vertical-align: bottom oder bottom: 0px schon weg sein.
    • Die Textblöcke "box_name" und "box_size" sollen zentriert über dem Foto stehen und der Text zentriert sein.


    Ich habe ein minimales Testfile erstellt und zur Erleichterung die Blöcke farbig hinterlegt. Vielleicht hat jemand Lust und kann mir dabei weiterhelfen.

    LG

  • Mit Flex würde das Layout so aussehen:

    Allerdings habe ich dabei die gleichen Probleme wie im ursprünglichen Layout wenn die Browserbreite kleiner wird und das Layout umspringt:

    • Der Text in "box" soll zentriert erscheinen
    • Der vertikale Freiraum in "box" soll verschwinden

    Außerdem soll der Block "box_size" sich am unteren Rand des Div befinden (vertical-align bzw. margin-bottom). Das sind alles keine Probleme mit der Entscheidung flex oder nicht flex zusammenhängen.

    Wie kann man das steuern?

  • Du solltes mal in Deinen Styles diesen Code benutzen


    @media screen and (max-width: xxxpx) {
    /* Breite beträgt höchstens xxx px */
    .content .col .box .box_name {

    hier kommen deine Parameter rein

    }

    .content .col .box .box_size {

    hier kommen deine Parameter rein

    }


    }


    xxxp = bei welcher Bildschirmgröße die CSS-Anweisungen verändert werden sollen. Ich denke mit Änderungen der margins, paddings und text-align sollte es gelingen.

  • Zitat

    Der vertikale Freiraum in "box" soll verschwinden

    Das kannst Du erreichen, indem Du Flex konsequent einsetzt:


    Statt eines festen vertikalen Abstandes:

    Code
    .box_name {
        padding: 5px;
        margin: 0;
        font-size: 200%;
        /* margin-top: 160px; */
        text-align: right;
        background-color: #ffc0c0;
    }

    die beiden Container mit Flex vertikal zentrieren:

    Code
    .box {
        padding: 15px;
        background-color: #c0ffff;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    Zitat

    Außerdem soll der Block "box_size" sich am unteren Rand des Div befinden

    Auch kein Problem mit auto-margin in der Vertikalen:

    Code
    .box_name {
        padding: 5px;
        margin: 0;
        font-size: 200%;
        /* margin-top: 160px; */
        text-align: right;
        background-color: #ffc0c0;
        margin-top: auto;
        margin-bottom: auto;
    }
    Zitat

    Der Text in "box" soll zentriert erscheinen

    Dafür musst Du dann wohl eine Mediaquery verwenden, wie von Lupus_III beschrieben.


    BTW: Dies ist ein klassischer Anwendungsfall für das figure-Tag:

    https://wiki.selfhtml.org/wiki…Textstrukturierung/figure

  • Wenn ich sempervivums Code von .box und .box_name verwende, dann steht der ganze Block (.box_name und .box_size) am unteren Rand des Fotos. Es soll aber .box_name mittig und nur .box_size am unteren Rand des Fotos stehen. Die Anweisungen margin-top: auto und margin-bottom: auto ändern nichts. Müßte nicht zusätzlich .box_size positioniert werden?


    Die Mediaquery habe ich eingebaut:

    Code
    .box { padding: 15px; padding-bottom: 0px; display: flex; flex-direction: column; justify-content: center; background-color: #c0ffff; }
    .box_name { padding: 5px; margin: 0; font-size: 200%; text-align: right; margin-top: auto; margin-bottom: auto; background-color: #ffc0c0; }
    .box_size { padding: 5px; text-align: right; vertical-align: bottom; margin-bottom: 15px; background-color: #ffc0c0; }
    .box_size span { font-size: 80%; white-space: nowrap; }
    
    @media screen and (max-width: 608px) { .box_name, .box_size { text-align: center; } }

    608 ist genau die Breite, wo die Columns umspringen. Ist gewährleistet, dass die Angabe von 608 auf allen Geräten und Browsern passt oder sollte man die Columns händisch schon vorher, z.B. bei 768 zum umspringen zwingen? Wie würde man das anstellen?


    figure hilft mir bei diesem Foto nichts, denn der Name und die Modeldaten sollen genauso dargestellt werden, wie gewünscht. Allerdings kann ich figure in der Übersicht der gesamten Models gut verwenden.


    Wird flex nur von neuen Browsern unterstützt?

  • Zitat

    Wenn ich sempervivums Code von .box und .box_name verwende, dann steht der ganze Block (.box_name und .box_size) am unteren Rand des Fotos. Es soll aber .box_name mittig und nur .box_size am unteren Rand des Fotos stehen. Die Anweisungen margin-top: auto und margin-bottom: auto ändern nichts.

    Einen Hinweis hatte ich noch vergessen: In deinem HTML fehlt der Doctype: <!doctype html> Mein Browser (Opera) zeigt das Layout auch ohne richtig an, aber möglicher Weise sieht deiner das strenger. Sieht dann so aus:

    html-seminar.de/woltlab/attachment/2567/

    Wenn es bei dir nicht so aussieht, dann poste mal, welchen Browser Du benutzt.


    Zitat

    figure hilft mir bei diesem Foto nichts, denn der Name und die Modeldaten sollen genauso dargestellt werden, wie gewünscht.

    Auch mit dem figure-Tag kannst Du die Elemente genau so darstellen. Sind ja nur andere Namen für die Container.

  • Auch doctype ändert nichts, der Block .box steht entweder zentriert (justify-content: center) oder unten (justify-content: flex-end) bei .col, aber immer der gesamte Block (.box_name und .box_size).


    Ich habs probiert mit

    Google Chrome Version 84.0.4147.105 (Offizieller Build) (32-Bit) und

    Firefox 78.0.2 (32-Bit)


    Ich stelle nochmal die aktuellen Styles rein, vielleicht habe ich was übersehen:

  • Die Ausrichtung, Name in der Mitte und Infos unten, funktioniert nur, wenn freier Raum vorhanden ist. Mit dem align-self machst Du das zunichte. Wenn ich das deaktiviere, ist die Darstellung sofort OK:

    Code
    .col {
        display: flex;
        flex-direction: row;
        /* align-self: center; */
        padding: 10px;
        background-color: #c0c0ff;
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!