Zwei Spalten Artikelliste?

https://www.kleingarten-koeln.de/article-list/

// Artikelliste -alle- Hintergrundfarbe 
.articleList > li {
   background-color: #F3F3F3;
}

// 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;
    }
}

so??

Super, gefällt mir! Danke!

Sehr Schön Umgesetzt Danke.

IronEagle Ich würde an deiner Stelle noch folgendes hinzufügen, damit die ersten beiden Artikel nicht so unschön versetzt sind:

@media (min-width: 1025px) {
    .articleList > li:first-child {
        margin-top: 0;
    }
}

LogixX Untereinander kriegst du es z.B. so:

.articleList .box128 {
    flex-direction: column;
}

Für größere (nicht unscharfe) Bilder müsste zusätzlich das Template angepasst werden.

Ich muss das hier nochmal ausgraben kann man auch die Box über den Inhaltsbereich schieben .boxTop und so darstellen das die breite dem Content entspricht ?

Quote from ReeN

Für größere (nicht unscharfe) Bilder müsste zusätzlich das Template angepasst werden.

Hallo vielen Dank für denn CSS Code .... leider sind bei mir nun die Bilder nicht so breit wie die Spalte an sich!

Wie müsste denn das Template angepasst werden, damit es wieder passend aussieht?

Vielen Dank

Hallo pjfry

Quote from pjfry

Wie müsste denn das Template angepasst werden, damit es wieder passend aussieht?

Leider fehlt hier jeglicher Ansatzpunkt um dieses Problem nachzustellen.

Von daher wäre es wünschenswert uns eine Liveansicht zu Verfügung zu stellen

Wenn das Bild die Breite nicht erreicht, wird das hiermit korrigiert:

#tpl_wcf_articleList .articleListImage > img {
    height: auto !important;
    width: 100% !important;
}

Sollten die Bilder von der Höhe nicht passen (weil zu hoch) müssten sie für den Artikel zusätzlich angepasst (zugeschnitten) werden.

Super danke dir Hitman der CSS Code war optimal damit wurde nun genau das erreicht wie ich es wollte - Dank Dir!

Servus!

Auch ein Dank von mir,

hab just in diesem Moment nach genau dieser Änderung gesucht.

Sascha

Quote from ReeN

Für größere (nicht unscharfe) Bilder müsste zusätzlich das Template angepasst werden.

Hm, okay.. Also ich würde das Bild gerne etwas kleiner haben und auf jeden Fall schärfer.

Welche Template-Anpassungen wären denn erforderlich?