Hallo,
Je theme maakt gebruik van ’t bootstrap-framework. Je kunt als volgt de html opzetten
<div class="row">
<div class="col-xs-6 col-md-4">plaatje 1</div>
<div class="col-xs-6 col-md-4">plaatje 2</div>
<div class="col-xs-6 col-md-4">plaatje 3</div>
</div>
Je kunt met Bootstrap ook de centrering en de responsiness regelen. De div-jes geef je de class “center-block” en de img “img-responsive”. Al met al komt het er dan als volgt uit te zien
<div class="row">
<div class="col-xs-6 col-md-4 center-block"><img src="..." class="img-responsive" alt="..."></div>
<div class="col-xs-6 col-md-4 center-block"><img src="..." class="img-responsive" alt="..."></div>
<div class="col-xs-6 col-md-4 center-block"><img src="..." class="img-responsive" alt="..."></div>
</div>
Zorg ervoor dat je plaatje minimaal 768px breed is, anders krijg je onscherp beeld op grotere mobieltjes/landscape modus.
Groet,
Lianne
Thread starter
spijkb
(@spijkb)
Ha Lianne,
Dit is geweldig, ze zijn nu responsive. Ik heb niks in de stylesheet gedaan. Klopt dat?
Kan ik er ook voor zorgen dat ze naast elkaar blijven?
Bij een bepaalde schaal springen ze naar 2 naast en 1 onder en vervolgens naar elk onder elkaar.
bart
Hi Bart,
Dat je niets in de stylesheet hoefde te doen is nu juist de grap van Bootstrap. De classes die je inzet, zijn al voorzien van css, dus het werk is voor je gedaan. Bootstrap bied je op allerlei andere design-mogelijkheden veel voordeel. Op YouTube struikel je over de instructiefilmpjes om het onderste uit de kan te halen.
Als je altijd de plaatjes naast elkaar wilt houden, gebruik dan:
<div class="row">
<div class="col-xs-4 col-md-4 center-block"><img src="..." class="img-responsive" alt="..."></div>
<div class="col-xs-4 col-md-4 center-block"><img src="..." class="img-responsive" alt="..."></div>
<div class="col-xs-4 col-md-4 center-block"><img src="..." class="img-responsive" alt="..."></div>
</div>
Groet,
Lianne
Thread starter
spijkb
(@spijkb)
Ja, alles helemaal perfect. Dank je wel Lianne. Ik ga jouw site tweeten.