Boxen Darstellung Problem

[detio]

Hallo,

eventuell hat mir jemand einen Tipp.

Aktuell habe ich in den News drei einträge und das sieht auch gut aus:

sobald ich einen neuen Eintrag in die Datenbank gebe sieht es so aus:

es wird einfach in der Zeile ein Eintrag reingequetscht.

Das Ziel sollte eigentlich sein das die Abstände zwischen den Bildern bleibt und einfach unter weiter geht wie zb. hier:


Mein PHP Code sieht aktuell so aus:

<div class="teaser-wrapper teaser-wrapper-desktop">
<?php
$sql = "SELECT * FROM blog ORDER BY id DESC ";
foreach ($pdo->query($sql) as $row)
{
echo "
<div class='teaser-item'>
<div class='bg-img '>
<img class='lazy' width='' src='../bilder/blog/{$row['titel_pic']} ' data-src='../bilder/blog/{$row['titel_pic']} ' data-src-retina='../bilder/blog/{$row['titel_pic']} ' alt='{$row['meta_titel']}'/>
</div>
<div class='content-wrapper'>
<div class='date'>{$row['erstellt']}</div>
<div class='title'><a href='aktuelles.php?id={$row['id']}'> {$row['titel']} </a></div>
<div class='teaser-text'>{$row['meta_beschreibung']}</div>
</div>
</div>
";
}
?>
</div>

 

[Gelöschtes Mitglied 36401]

Und das CSS dazu sieht wie aus?

 

[detio]

Und das CSS dazu sieht wie aus?

ah sorry:



@media (max-width:767px) {
section.blog-teaser .wrapper {
padding:60px 15px 80px;
}


}

section.blog-teaser .wrapper .text-wrapper {
width:66%;margin:0 auto;
}

@media (max-width:1329px) {
section.blog-teaser .wrapper .text-wrapper {
width:82%;
}


}

@media (max-width:1023px) {
section.blog-teaser .wrapper .text-wrapper {
width:100%;
}


}

section.blog-teaser .wrapper .text-wrapper h1 + p,section.blog-teaser .wrapper .text-wrapper .h1 + p,section.blog-teaser .wrapper .text-wrapper h2 + p,section.blog-teaser .wrapper .text-wrapper .h2 + p,section.blog-teaser .wrapper .text-wrapper h3 + p,section.blog-teaser .wrapper .text-wrapper .h3 + p,section.blog-teaser .wrapper .text-wrapper h4 + p,section.blog-teaser .wrapper .text-wrapper .h4 + p {
margin-top:30px;
}

section.blog-teaser .wrapper .text-wrapper + .teaser-wrapper {
margin-top:60px;
}

@media (max-width:767px) {
section.blog-teaser .wrapper .text-wrapper + .teaser-wrapper {
margin-top:40px;
}


}

section.blog-teaser .wrapper .teaser-wrapper {
display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-moz-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;
}

@media (max-width:1023px) {
section.blog-teaser .wrapper .teaser-wrapper {
display:block;
}


}

@media (max-width:1023px) {
section.blog-teaser .wrapper .teaser-wrapper.teaser-wrapper-desktop {
display:none !important;
}


}

section.blog-teaser .wrapper .teaser-wrapper.teaser-wrapper-mobile {
margin-bottom:20px;
}

@media (min-width:1024px) {
section.blog-teaser .wrapper .teaser-wrapper.teaser-wrapper-mobile {
display:none !important;
}


}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item {
box-shadow:0px 3px 7px 0px rgba(0,0,0,0.08);background-color:#FFFFFF;width:32.45%;position:relative;
}

@media (max-width:1023px) {
section.blog-teaser .wrapper .teaser-wrapper .teaser-item {
width:82%;left:50%;-ms-transform:translate(-50%,0);-webkit-transform:translate(-50%,0);-moz-transform:translate(-50%,0);transform:translate(-50%,0);
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item + .teaser-item {
margin-top:40px;
}


}

@media (max-width:767px) {
section.blog-teaser .wrapper .teaser-wrapper .teaser-item {
width:100%;
}


}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .bg-img {
height:198px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper {
padding:35px 35px 75px;text-align:left;color:#001F7A;
}

@media (max-width:1329px) {
section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper {
padding:22px 22px 62px;
}


}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tagsred {
list-style:none;padding:0;font-size:10px;line-height:7px;color:#ff0000;text-transform:uppercase;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tagsred {
list-style:none;padding:0;font-size:10px;line-height:7px;color:#ff0000;text-transform:uppercase;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tagsred li {
display:inline-block;height:100%;padding:7px 4px 2px;border:1px solid #ff0000;margin-bottom:5px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tagsred li + li {
margin-left:5px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tagsred + .date {
margin-top:15px;
}
section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tags {
list-style:none;padding:0;font-size:10px;line-height:7px;color:#006bac;text-transform:uppercase;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tags li {
display:inline-block;height:100%;padding:7px 4px 2px;border:1px solid #006bac;margin-bottom:5px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tags li + li {
margin-left:5px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper ul.tags + .date {
margin-top:15px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper .date,section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper .teaser-text {
opacity:.8;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper .date {
font-size:13px;line-height:16px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper .title {
font-size:24px;line-height:32px;margin-top:10px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .content-wrapper .teaser-text {
line-height:26px;margin-top:12px;
}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .btn-label {
color:#006bac;font-size:14px;line-height:14px;font-weight:600;position:absolute;bottom:35px;left:35px;
}

@media (max-width:1329px) {
section.blog-teaser .wrapper .teaser-wrapper .teaser-item .btn-label {
bottom:22px;left:22px;
}


}

section.blog-teaser .wrapper .teaser-wrapper .teaser-item .btn-label .icon-arrow_right {
width:14px;margin-left:2px;
}

section.blog-teaser .wrapper .teaser-wrapper .slick-slide {
text-align:center;left:initial;-webkit-transform:initial;-moz-transform:initial;-ms-transform:initial;transform:initial;
}

section.blog-teaser .wrapper .teaser-wrapper .slick-slide .teaser-item {
max-width:400px;
}

section.blog-teaser .wrapper .teaser-wrapper .slick-slide .teaser-item img.icon-arrow_right {
display:inline-block;
}

section.blog-teaser .wrapper .teaser-wrapper .prev-btn,section.blog-teaser .wrapper .teaser-wrapper .next-btn {
position:absolute;top:50%;display:block;width:40px;height:40px;padding:0;-webkit-transform:translate(0,-50%);-ms-transform:translate(0,-50%);-moz-transform:translate(0,-50%);transform:translate(0,-50%);cursorointer;z-index:1;background-color:rgba(255,255,255,0.5);border:none;outline:none;
}

section.blog-teaser .wrapper .teaser-wrapper .prev-btn .icon-arrow_left,section.blog-teaser .wrapper .teaser-wrapper .next-btn .icon-arrow_left,section.blog-teaser .wrapper .teaser-wrapper .prev-btn .icon-arrow_right,section.blog-teaser .wrapper .teaser-wrapper .next-btn .icon-arrow_right {
width:28px;
}

section.blog-teaser .wrapper .teaser-wrapper .prev-btn.slick-disabled,section.blog-teaser .wrapper .teaser-wrapper .next-btn.slick-disabled {
display:none !important;
}

section.blog-teaser .wrapper .teaser-wrapper .prev-btn {
left:-12px;
}

@media (max-width:767px) {
section.blog-teaser .wrapper .teaser-wrapper .prev-btn {
left:-12px;
}


}

section.blog-teaser .wrapper .teaser-wrapper .next-btn {
right:-12px;
}

@media (max-width:767px) {
section.blog-teaser .wrapper .teaser-wrapper .next-btn {
right:-12px;
}


}

section.blog-teaser .wrapper .teaser-wrapper ul.dots {
position:absolute;bottom:-30px;display:block;width:100%;padding:0;margin:0;list-style:none;text-align:center;
}

section.blog-teaser .wrapper .teaser-wrapper ul.dots li {
position:relative;display:inline-block;width:9px;height:9px;margin:0 3px;cursorointer;
}

section.blog-teaser .wrapper .teaser-wrapper ul.dots li button {
font-size:0;line-height:0;display:block;width:9px;height:9px;padding:0;cursorointer;border:0;outline:none;background-color:#006bac;opacity:.15;
}

section.blog-teaser .wrapper .teaser-wrapper ul.dots li.slick-active button {
opacity:1;
}

section.blog-teaser .wrapper .text-wrapper + .bt,section.blog-teaser .wrapper .teaser-wrapper + .bt {
margin-top:45px;
}

section.blog-teaser.news-teaser .wrapper {
padding-top:20px;padding-bottom:20px;background-color:#FFFFFF;
}

section.blog-teaser.news-teaser .wrapper .text-wrapper h2 {
text-align:left;
}

section.blog-teaser.news-teaser .wrapper .text-wrapper + .teaser-wrapper {
margin-top:0;
}

section.blog-teaser.news-teaser .wrapper .teaser-wrapper {
-webkit-justify-content:flex-start;-moz-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;
}

section.blog-teaser.news-teaser .wrapper .teaser-wrapper .teaser-item {
margin-top:30px;
}

@media (min-width:768px) {
section.blog-teaser.news-teaser .wrapper .teaser-wrapper .teaser-item + .teaser-item {
margin-left:1.325%;
}

section.blog-teaser.news-teaser .wrapper .teaser-wrapper .teaser-item + .teaser-item:nth-child(3n+4) {
margin-left:0;
}


}

@media (max-width:767px) {
section.blog-teaser.news-teaser .wrapper .teaser-wrapper .teaser-item {
margin-top:20px;
}


}

section.blog-teaser.news-teaser .wrapper .teaser-wrapper .teaser-item .bg-img {
height:234px;
}

 

[basti1012]

Kannst du uns mal das HTML geben, was im Browser ankommt?
Besser noch wäre ein Link zu der Seite.
Ich würde jetzt sagen das dein Hauptcontainer einfach nur ein flex-wrap:wrap fehlt.
Du hast in deiner CSS zwar davon was stehen , doch ohne den komplette HTML Code zu kennen ist das schwer zu sagen, ob das alles ist.