Liebe Community,
ich baue zurzeit eine neue Website (J 3.9) mit JoomSharper-Helix-Template. Ich würde gern zwei Dinge über CSS steuern, scheitere aber an den konkreten CSS-Auszeichnung und würde mich sehr freuen, wenn ihr mich hierbei unterstützen könntet.
1.) Artikel-Bilder steuern
Ich würde gerne zentral per CSS automatisch allen Bildern INNERHALB VON ARTIKELN (!, nicht in Modulen etc.) margin-Ränder anfügen und die Bildgrößen im responsiven Verhalten steuern.
Es sollen also
- Bilder rechts vom Text positioniert und umflossen werden (Desktop-Version),
- Bilder rechts vom Text so verkleinert werden, dass ca. 50% der Bildschirmbreite für Text, 50% der Bildschirmbreite für das Bild verwendet wird (Tablets)
- und ab einer kleinen Bildschirmgröße sollen die Bilder in Vollbreite wechseln und den vorher umfließenden Text nach unten verdrängen (Smartphones, bereits im Template enthalten).
Für die mittlere Anforderung dachte ich an:
img {
width:100%;
height:auto;
margin-right: 10px;
margin-left: 10px;
}
@media screen and (min-width:28em) {
img {
width:50%;
}
}
@media screen and (min-width:50em) {
img {
width:33%;
}
}
FRAGE: Wie gebe ich an, dass diese Anweisung nur auf die Artikel angewandt wird?
2.) Tags-Anzeige
Die Tags erscheinen in Button-Form oberhalb der Artikel und sind horizontal optimal ausgerichtet. Responsiv fällt aber auf, dass der Zeilenabstand zwischen den Tags, wenn sie sich auf 2 und mehr Zeilen verteilen, zu gering ist. Wie kann ich dies ändern? Screenshot anbei.
Ganz herzlichen Dank im Voraus!
Beste Grüße!
