• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Boxen Darstellung Problem

detio

Neues Mitglied
Hallo,

eventuell hat mir jemand einen Tipp.

Aktuell habe ich in den News drei einträge und das sieht auch gut aus:
normal.png
sobald ich einen neuen Eintrag in die Datenbank gebe sieht es so aus:
fehler1.png
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:
ziel.png

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>
 
Werbung:
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%);cursor:pointer;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;cursor:pointer;
}

section.blog-teaser .wrapper .teaser-wrapper ul.dots li button {
font-size:0;line-height:0;display:block;width:9px;height:9px;padding:0;cursor:pointer;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;
}
 
Werbung:
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.
 
Zurück
Oben