Teaser Responsive Design by Mediascreen

[yordande]

Hallo zusammen,

ich benutze bei meiner neuen Internetseite sehr gerne das Plugin Teaser, leider ist mir aber aufgefallen, dass manche Einstellungen sich nicht unbedingt responsive verhalten, oder bessergesagt sehr unübersichtlich auf Handy und kleine Displays dargestellt werden. Z.B. row of 2 wird aufm Handy weiterhin in zwei Reihen angezeigt, Wörter werden geschnitten. Kann man die CSS-Datei erweiterten, dass bei der solchen Displays die Inhalte untereinander angezeigt werden?

Besten Dank für Eure Hilfe im Voraus!

Freundliche Grüsse
Desi

[lck]

Kann man die CSS-Datei erweiterten, dass bei der solchen Displays die Inhalte untereinander angezeigt werden?

Ergänze die /teaser/css/stylesheet.css am Ende mit (Beispiel für row_of_2):

Code: Select all

@media screen and (max-width: 600px) { /* den Wert evtl. anpassen*/
div.teaser.row_of_2 div {
    width: 100%;
}
}

[yordande]

Lieben Dank! Es hat funktioniert!

[lck]

Lieben Dank! Es hat funktioniert!

Man könnte das natürlich gleich auf alle Beispiele anwenden und auch noch etwas erweitern:

Code: Select all

@media screen and (max-width: 600px) {
div.teaser.standard div,
div.teaser.rounded div,
div.teaser.row_of_2 div,
div.teaser.row_of_3 div,
div.teaser.fixed_size div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    float: none;
    margin: 0 0 1em;
    width: 100%;
}
}