Co ja robię źle. Nie mogę pojąć jak ładnie zbudować responsywność strony :(
Mam 14 elementów, które chcę aby układały się ładnie przy zmianie rozmiaru okna przeglądarki. Nie chce aby schodziły pojedynczo do następnego wiersza tylko, że przy określonej rozdzielczości - dzieliły się np. na dwie grupy po 6 elementów jedna pod sobą. Jak to zrobić? Ukrywaniem rozmiaru lg i definiowaniem kolejnego widoku dla innej rozdzielczości? (kod poniżej). Nie do końca to działa :(
I druga rzecz, używam @media i teraz aby ładnie wyglądały czcionki na ekranie powyżej 1200px muszę je robić bardzo małe aby przy zmniejszaniu okna do granicy kolejnej zmiany nie zepsuły one widoczności bo okna się zmniejsza a one nie i dopiero na granicy się znów zmniejszają i znów musze je tak zmniejszyć aby wyglądały dobrze przez cały czas dochodzenia do następnej zmiany? Czy ja czegoś nie rozumiem ? Może jest na to sposób?
<div class="container-fluid"> <div class="row"> <div class="col-lg-12 hidden-md hidden-s hidden-xs"> <ul> <li><img src="images/1.png" /><div class="s1">JavaScript</div></li> <li><img src="images/2.png" /><div class="s1">AngularJS</div></li> <li><img src="images/4.png" /><div class="s1">Bootstrap</div></li> <li><img src="images/6.png" /><div class="s1">CSS</div></li> <li><img src="images/7.png" /><div class="s1">SASS</div></li> <li><img src="images/5.png" /><div class="s1">HTML</div></li> <li><img src="images/8.png" /><div class="s1">RWD</div></li> <li><img src="images/9.png" /><div class="s1">JSON</div></li> <li><img src="images/ps.png" /><div class="s1">AngularJS</div></li> <li><img src="images/illustrator.png" /><div class="s1">AngularJS</div></li> <li><img src="images/indesign.png" /><div class="s1">AngularJS</div></li> <li><img src="images/corel.png" /><div class="s1">AngularJS</div></li> <li><img src="images/visual.png" /><div class="s1">AngularJS</div></li> <li><img src="images/git.png" /><div class="s1">AngularJS</div></li> </ul> </div> <div class="col-md-12 hidden-s hidden-xs hidden-lg"> <ul> <li><img src="images/1.png" /><div class="s1">JavaScript</div></li> <li><img src="images/2.png" /><div class="s1">AngularJS</div></li> <li><img src="images/4.png" /><div class="s1">Bootstrap</div></li> <li><img src="images/6.png" /><div class="s1">CSS</div></li> <li><img src="images/7.png" /><div class="s1">SASS</div></li> <li><img src="images/5.png" /><div class="s1">HTML</div></li> <li><img src="images/8.png" /><div class="s1">RWD</div></li> </ul> </div> <div class="col-md-12 hidden-s hidden-xs hidden-lg"> <ul> <li><img src="images/9.png" /><div class="s1">JSON</div></li> <li><img src="images/ps.png" /><div class="s1">AngularJS</div></li> <li><img src="images/illustrator.png" /><div class="s1">AngularJS</div></li> <li><img src="images/indesign.png" /><div class="s1">AngularJS</div></li> <li><img src="images/corel.png" /><div class="s1">AngularJS</div></li> <li><img src="images/visual.png" /><div class="s1">AngularJS</div></li> <li><img src="images/git.png" /><div class="s1">AngularJS</div></li> </ul> </div> </div> </div>