Hier noch die HTML und die CSS.

HTML:

<h5 style="font-size:32px; color: #ad0014; text-shadow:#fff .055em .075em .1em; padding-top:10px;padding-bottom:10px;background:rgba(155,155,155,0.6);color:#ad0014">IMPRESSIONEN AUS MEINER WERKSTATT</h5>
<div class="masonry-wrapper"><div class="masonry">
<div class="masonry-item">
<img loading=lazy src=./images/impressionen/durchgelaufene_sohle.jpg title=Durchgelaufene_Sohle alt=durchgelaufene_sohle.jpg class=masonry-content>
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/haferlschuh_1.jpg" title="Haferlschuh_1" alt="haferlschuh_1.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/haferlschuh_2.jpg" title="Haferlschuh_2" alt="haferlschuh_2.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/rahmengenaeht.jpg" title="Rahmengenäht" alt="rahmengenaeht.jpg.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/rote_sohle_1.jpg" title="rote_sohle_1.jpg" alt="rote_sohle_1.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/rote_sohle_2.jpg" title="Rote_Sohle_2" alt="rote_sohle_2.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/rahmengenaeht_1.jpg" title="Rahmengenäht_1" alt="rahmengenaeht_1.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/rahmengenaeht_2.jpg" title="Rahmengenäht_2" alt="rahmengenaeht_2.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/reparierte_sohle_1.jpg" title="Reparierte_sohle_1" alt="reparierte_sohle_1.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/Kunert_002.jpg" title="Kunert_002" alt="Kunert_002.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/Kunert_003.jpg" title="Kunert_003" alt="Kunert_003.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/Kunert_023.jpg" title="Kunert_023" alt="Kunert_023.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/Kunert_057.jpg" title="Kunert_057" alt="Kunert_057.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/Kunert_038.jpg" title="Kunert_038" alt="Kunert_038.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/Kunert_046.jpg" title="Kunert_046" alt="Kunert_046.jpg" class="masonry-content">
</div>
<div class="masonry-item">
<img loading="lazy" src="./images/impressionen/Kunert_051.jpg" title="Kunert_051." alt="Kunert_051.jpg" class="masonry-content">
</div>
</div></div>
<h6 style="font-size:32px; color: #ad0014; text-shadow:#fff .055em .075em .1em; bottom:20px; left:0px; width:100%; height:auto; padding-top:10px; padding-bottom:10px; background:rgba(155,155,155,0.6);color:#ad0014">Selbstverständlich repariere ich auch Rahmengenähte Schuhe!</h6>
<div></div>

CSS:

img,video{max-width:100%;vertical-align:middle}.wrapper{max-width:1920px;margin-right:auto;margin-left:auto;padding:1.5em}.masonry-wrapper{padding:1.5em;max-width:1920px; margin-right:auto;margin-left:auto}.masonry{columns:1;column-gap:10px}.masonry-item{display:inline-block;vertical-align:top;margin-bottom:10px}@media only screen and (max-width:802px) and (min-width:320px){.masonry{columns:2}}@media only screen and (min-width:768px){.masonry{columns:4}}.masonry-item,.masonry-content{border-radius:4px;overflow:hidden}}

Wieso wird nicht das interne Widget Masonry verwendet? Wäre doch viel einfacher!

Du kannst aber auch versuchen im CSS Code von "columns:4" auf "columns:3" umzubessern!

Oder du fügst eine neue Breakpoint ein mit 3 Reihen.

Hallo Andreas,

durch das ersetzen des Widget mit Custem Code ist die Seite wesentlich schneller geworden, da keine JS mehr nachgeladen werden muss.

Ich lass das mal jetzt so.

Danke trotzdem