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
Teaser Responsive Design by Mediascreen
Re: Teaser Responsive Design by Mediascreen
Ergänze die /teaser/css/stylesheet.css am Ende mit (Beispiel für row_of_2):yordande wrote:Kann man die CSS-Datei erweiterten, dass bei der solchen Displays die Inhalte untereinander angezeigt werden?
Code: Select all
@media screen and (max-width: 600px) { /* den Wert evtl. anpassen*/
div.teaser.row_of_2 div {
width: 100%;
}
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage
Re: Teaser Responsive Design by Mediascreen
Lieben Dank! Es hat funktioniert!
Re: Teaser Responsive Design by Mediascreen
Man könnte das natürlich gleich auf alle Beispiele anwenden und auch noch etwas erweitern:yordande wrote:Lieben Dank! Es hat funktioniert!
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%;
}
}
„Bevor du den Pfeil der Wahrheit abschießt, tauche die Spitze in Honig!“ Ludwig's XH-Templates for MultiPage & OnePage