Sfasamento di finestre di immagini

[chiappesonore]

Ciao a tutti,
a questa pagina si puo' vedere come l'ultima fila di immagini sia sfalsata (1 sopra e 2 sotto).

Il codice e' il seguente. Non riesco a capire come risolvere. Cosa ne dite?

<div class="gallery"><a href="/wp-content/uploads/2020/03/HotPotMilan.jpg" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2020/03/HotPotMilan.jpg" alt="Hotpot Milan" /></a><div class="desc">A good hotpot in Milan</div></div>
<div class="gallery"><a href="/wp-content/uploads/2020/03/Typical street.jpg" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2020/03/Typical street.jpg" alt="Creuza" /></a><div class="desc">Typical street of Boccadasse</div></div>
<div class="gallery"><a href="/wp-content/uploads/2020/03/Sticks.jpg" target="_blank" rel="noopener noreferrer"><img src="/wp-content/uploads/2020/03/Sticks.jpg" alt="Sticks" /></a><div class="desc">Wooden sticks in Cot Cos restaurans. 1 stick = 1 steak.</div></div>

[carlomarangoni]

Il problema è che la pagina non è responsive! Se la guardi con una risoluzione superiore ai 750px la vedi bene se la risoluzione è inferiore la vedi come tu dici

[Vincent.Zeno]

il problema che lamenti è dovuto al fatto che i contenitori in questione hanno dimensioni diversa in altezza.
volendoli flottare, se il contenitore che torna a capolinea "si scontra" con l'altezza di un precedente contenitore, questo si blocca e non va a capolinea.
i contenitori a seguire si comportano di conseguenza e creano nuove linee.

per risolvere elegantemente puoi utilizzare flexbox con proprietà flex-wrap, altrimenti devi fare molta attenzione affinché tutti i contenitori abbiano altezza identiche.

[chiappesonore]

Il problema è che la pagina non è responsive!

Eppure il tema e' responsive! come posso risolvere?

per risolvere elegantemente puoi utilizzare flexbox con proprietà flex-wrap, altrimenti devi fare molta attenzione affinché tutti i contenitori abbiano altezza identiche.

Ottimo grazie

[chiappesonore]

Questo perche' noto che anche a questa pagine ho creato una mappa ma non funziona sul mobile.
Se ne puo' creare una css anche in questo caso?

<map name="workmap">  <area shape="rect" coords="0,0,115,115" alt="Hong Kong" href="/index.php?page_id=1539">
  <area shape="rect" coords="115,0,230,115" alt="Gansu" href="/index.php?page_id=1683">
  <area shape="rect" coords="230,0,345,115" alt="Monte Cinto" href="/index.php?page_id=298">

[Vincent.Zeno]

è un'altro argomento, sarebbe necessario aprirci un'altro thead.

per rimappare una map area serve un supporto JS, qui un paio di esempi.
https://github.com/stowball/jQuery-rwdImageMaps
https://www.lachiavenelpozzo.com/com...immagini-mappa