Grid Boxen bei niedriger Breite nebeneinander

  • Ou klar, entschuldiung .. Den Link wollte ich natürlich nicht verbergen ;)
    Hab dafür eine zweite Seite angelegt: http://woltlabcollection.de/index.php?newindex/




    Codename: Edge was weißt du, das ich nicht weiß?

    Gar nichts.. :)
    Ist halt nur ein Lorem Ipsum Name, damit ich da irgendwas stehen habe :D


    Zitat von softcreatr.de - Konversationen

    "Bleeding Edge" heißt einfach nur, dass es sich um den aktuellsten Entwicklungsstand handelt. Also 3.1.0 Alpha 1, allerdings mit sämtlichen Änderungen die maximal 15 Minuten vor deinem Download durchgeführt wurden.

    Es heißt übrigens Suite und da du zwischen Forum und WCF normal unterscheidest, solltest du auch konsistent WoltLab Suite Core und WoltLab Suite Forum anführen - sie komplette Suite beinhaltet ja noch mehr. ;)

    Ou vielen Dank für den Tipp :)

  • Hallo @s. Oliver


    ich denke du wirst mit deiner Vorlage nicht viel machen (CSS) können, da dein HTML-Code so nicht aufgeht ;)
    Du kannst hier nur mit einer Box arbeiten da sonst deine Grid-Boxen über CSS nicht greifen.
    Einzelne Boxen lassen keinen .row über CSS zu!
    Ausserdem müsstest du jede Box mit display: flex deklarieren, damit die Boxen überhaupt nebeneinander stehen.
    Du müsstest in deinem Fall also die Bilder in dem HTML-Code manuell einbinden und verlinken.
    Bilder über FTP hochladen und in den (Beispiel) images/boxpic hochladen.


    Das sieht dann so aus:



    <div class="gridBox col-md-6">
    gibt dann automatisch folgende CSS-Deklaration raus:


    CSS
    .col-md-6 {
    	flex: 0 0 50%;
    	max-width: 50%;
    }

    und das md bedeutet @media (min-width: 769px


    (also gültig bis zu einer Bildschirmgrösse grösser als 769px)


    und damit die Bilder nicht gefloatet werden und ein Grösse von 100% haben kommt dies noch dazu



    CSS
    .boxWithImage.boxesContentTop .boxImage, 
    .boxWithImage.boxesContentBottom .boxImage {
        float: none;
        width: 100%;
    }

    Ergebnis:



    ;)