Ich möchte alle Artikel Bilder nur in der Artikel-Auflistung für Smardphones und Tablets usw ausblenden.
Für PC's und alle Monitor- bzw Displaygrößen ab 800px Breite sollte die Artikelliste weiterhin mit einem Bild zu sehen sein.
So sieht die Auflistung im Moment bei mir aus.
Bei den Smartphones etc. fängt es jedoch an Schwierig zu werden und es sieht zur Zeit nicht besonders schön aus.
Es sollte doch möglich sein die Bilder ausblenden zu können.
Zur Zeit verwende ich folgenden CSS-Code:
CSS
// Artikelliste -alle- Hintergrundfarbe
.articleList > li {
background-color: #F3F3F3;
box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}
// Artikelliste nebeneinander
@include screen-lg {
.articleList {
display: flex;
flex-wrap: wrap;
margin-left: -1%;
margin-right: -1%;
}
.articleList > li {
width: 50%;
flex: 0 0 48%;
margin-bottom: 20px;
max-width: 48%;
border: 1px solid $wcfContentBorderInner;
margin: 1%;
padding: 20px;
min-height: 200px;
margin-bottom: 20px;
}
.articleList > li:not(:first-child) {
margin-top: 0px;
}
}
@media (min-width: 1025px) {
.articleList > li:first-child {
margin-top: 0;
}
}
.articleList .box128 {
flex-direction: column;
}
/* Image Anpassung */
.articleImage .articleImageWrapper {
max-height: none;
}
.articleImage .articleImageWrapper img {
width: auto !important;
}
.articleList .containerHeadline > h3 {
font-size: 18px;
}
.articleListImage img {
width: 400px !important;
height: 118px !important;
}
Alles anzeigen
(Im WoltLab-Forum steht auch die Änderung am Template welches an 3 Stellen geändert wurde.)
Was muss ich hier machen um die Bilder ausblenden zu können?