Boxen Darstellung Problem

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

detio

Neues Mitglied
8 Juli 2021
2
0
1
38
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>
 

detio

Neues Mitglied
8 Juli 2021
2
0
1
38
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;
}
 

basti1012

Senior HTML'ler
26 November 2017
1.612
173
63
Minden
basti1012.de
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.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.429
465
83
68
Das ist ja eine Inflation an Mediaqueries. Sehr wahrscheinlich kannst Du darauf verzichten. Sieh dir diese Demo an (hatte ich in der Schublade), sie ordnet die Boxen automatisch so an, dass auf die nächste Zeile übergegangen wird, wenn eine nicht mehr hinein passt:
Code:
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Image Stack</title>

    <style>
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        }

        /* Dies nur zu Demozwecken damit die Zellen sichtbar und nicht leer sind: */
        .cell {
            border: 2px solid lightblue;
            height: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </div>
</body>

</html>