Moduldarstellung bei Mobiler Ansicht

    Hallo zusammen,


    auf einer Seite gibt es drei Farbliche Module, die in der Desktop Ansicht nebeneinander stehen. Es geht um die drei bunten Module.


    In der mobilen Ansicht (Smartphone) sollen diese untereinander positioniert sein, allerdings klappt das nicht und die Module werden eingerück bzw. verkleinert dargestellt.


    Hier der Link zur Seite, hat jemand evtl. eine Idee?


    Danke und Gruß.

    Erhöhe hier (styles.css) den Breakpoint (480px), sodass nicht erst ab 480px umgeschalten wird, sondern bereits früher, wenn du das willst.


    Code
    @media screen and (max-width: 480px) {.top1, .top2, .top3 {width:320px; margin-bottom:3px;}.callbacks .caption a {font-size:14px;}}


    Wenn sich die Module gar nicht verkleinern, sondern direkt untereinander rutschen sollen, wenn nicht mehr genug Platz ist, würde ich empfehlen, das hier einzubauen:

    Code
    .top1, .top2, .top3 {
  min-width: 300px;
}


    Damit sorgst du dafür, dass die Module nicht kleiner als 300px werden.

    Zitat von Harmageddon

    Wenn sich die Module gar nicht verkleinern, sondern direkt untereinander rutschen sollen, wenn nicht mehr genug Platz ist, würde ich empfehlen, das hier einzubauen:

    Code
    .top1, .top2, .top3 {
  min-width: 300px;
}


    Damit sorgst du dafür, dass die Module nicht kleiner als 300px werden.


    Danke für den Tipp, eine Frage hat sich dazu noch ergeben, soll ich den oben genannten Code statt des alten Code eintragen oder ergänzent?

    Zitat von Dirk01

    Danke für den Tipp, eine Frage hat sich dazu noch ergeben, soll ich den oben genannten Code statt des alten Code eintragen oder ergänzent?


    Ergänzen. Entweder komplett eigenständig unten/oben/sonstwohin in eine deiner CSS-Dateien oder hier dazupacken:


    Code
    .top1, .top2, .top3 { position: relative; padding: 1em 1.5em; margin: 2em auto; color: #fff; padding: 1%; width: 31%; display: inline-block; -webkit-border-radius: 10px; -webkit-border-top-right-radius: 0; -moz-border-radius: 10px; -moz-border-radius-topright: 0; border-radius: 10px; border-top-right-radius: 0; background: -moz-linear-gradient(left, #CCCCCC 0%, #EEEEEE 50%, #EEEEEE 50%, #CCCCCC 100%); background: -webkit-gradient(linear, left top, right top, color-stop(0%,#CCCCCC),color-stop(50%,#EEEEEE), color-stop(50%,#EEEEEE), color-stop(100%,#CCCCCC)); }


    (styles.css)