Um die letzten Artikel auf der Hauptseite als Boxen nebeneinander anzuzeigen, nutze folgenden CSS-Code (der CSS-Definition des Stils zufügen):
Code
.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;
}
.articleList .articleListTeaser {
white-space: nowrap;
overflow: hidden;
width: 100%;
text-overflow: ellipsis;
}
Es werden nun jeweils 2 x 50% breite Boxen nebeneinander angezeigt die flexibel in der Breite sind.
Für die Ansicht im Mobilmodus füge folgendes ganz unten hinzu:
Code
@media only screen and (max-width: 980px) {
.articleList > li {
width: 100%;
flex: 0 0 100%;
max-width: 100%;
margin: 0%;
}
}