Widok Galerii na różnych ekranach

Question

Witam serdecznie. Mam pewien dość istotny problem... Na stornie www.bajkowykadr.pl/zdjecia.html mam galerie opartą na divach. Na większych ekranach typu 23 cale oraz na mniejszych 15,13 oraz smartfony i tablety galeria wyświetla się prawidłwo. Na przekątnych 17-21 cały wygląd glaerii trafia szlak. Proszę o wgląd do kodu i pomoc w rozwiązaniu problemu.

 

Pozdrawiam

Answer 1

przy 'float' jakie stosujesz to gdy zdjęcie nie mieści się w wierszu to jest przenoszone poniżej reszty, ale powyżej diva z clear:both - czyli powstaje nowy wiersz o wysokości zdjęcia, które "przeskoczyło" na dół.

poza tym width: 80% w #galeria to tak średnio, bo środkujesz tą galerię, ale tylko dla jednej szerokości tak jakby. bez sensu. Lepiej dać może max-width: w pixelach.

Fakt, usunięcie części clearów (poza ostatnim w galerii) polepsza widok, ale niekoniecznie nam o to chodzi.

Możesz też bawić się w @media queries dla danych przedziałów ekranu pozmieniać co nieco w CSS

Answer 2

googluj: flexbox

U mnie na 14'' też nie wygląda fajnie.

Answer 3

usunięcie tych pośrednich clear: both znacznie polepszy sprawę aczkolwiek nie do końca ponieważ używasz różnych formatów zdj. aby to się odpowiednio porządkowało musisz użyć algorytmu w js lub jq który będzie odpowiednio grupował zdj. według rozmiaru

<div class="gal2"><img src="img/photo01.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo12.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo20.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo14.jpg" alt="zdjecie w galeri"/></div>
<div class="gal"><img src="img/photo16.jpg" alt="zdjecie w galeri"/></div>
<div class="gal"><img src="img/photo18.jpg" alt="zdjecie w galeri"/></div>
<div class="gal"><img src="img/photo02.jpg" alt="zdjecie w galeri"/></div>
<div class="gal"><img src="img/photo08.jpg" alt="zdjecie w galeri"/></div>
<div class="gal"><img src="img/photo22.jpg" alt="zdjecie w galeri"/></div>
<div class="gal"><img src="img/photo19.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo11.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo03.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo04.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo15.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo06.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo17.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo10.jpg" alt="zdjecie w galeri"/></div>
<div class="gal2"><img src="img/photo23.jpg" alt="zdjecie w galeri"/></div>
<div style="clear: both;"> </div>

P.S. poczytaj o flexboxie...