WebSite X5Help Center

 
Klaus G.
Klaus G.
User

Frage zu Masonry  de

Autor: Klaus G.
Visited 863, Followers 1, Udostępniony 0  

Habe hier mal ganz eine spezielle Frage.

Ich habe in einer HTML-Box einen Masonry integriert (mit HTML und CSS Code), funktioniert einwand frei.

Jetzt hätte ich es gerne noch das es bei 800Pixel 3 Spalten sind und nicht 4.

LINK

Die Website habe ich mal entmüllt und umgestalltet und jetzt ist sie wirklich schnell (ohne das die HTML nachträglich optimiert ist).

Eine Lösung wär echt SUPER von euch.

Danke schon mal im vorraus.

Gruß

MCMACMASTER

Posted on the
3 ODPOWIEDZI
Klaus G.
Klaus G.
User
Autor

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

Czytaj więcej
Posted on the from Klaus G.
Andreas S.
Andreas S.
Moderator
Najlepszy Użytkownik miesiąca DE

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.

Czytaj więcej
Posted on the from Andreas S.
Klaus G.
Klaus G.
User
Autor

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

Czytaj więcej
Posted on the from Klaus G.