Ondersteuning » Thema en CSS/opmaak » drie afbeeldingen naast elkaar in mobiel of tablet

  • Opgelost spijkb

    (@spijkb)


    Ik wil drie plaatjes in een horizontale rij op de eerste pagina van mijn site: http://www.spijkerenhamer.nl.

    1. Eerst had ik drie DIV’s gemaakt en met “flow:left” (en margin en center) in de stylesheet, dat werkt. Maar in smaller scherm en op tablet en phone, zin de plaatjes te groot, ze verschijnen onder elkaar.
    Maar ze passen de maat niet aan ofzo.

    2. Toen heb ik een tabel gemaakt. Nu verschijnen ze wel naast elkaar in het midden, zelfs in kleiner scherm: <table border=”0″ width=”60%” cellspacing=”20em” cellpadding=”20em” align=”center”>
    Maar op tablet en mobiel krijgen ze elk een andere afmeting.

    What to do?

    dank,
    Bart

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • 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.

4 reacties aan het bekijken - 1 tot 4 (van in totaal 4)
  • Het onderwerp ‘drie afbeeldingen naast elkaar in mobiel of tablet’ is gesloten voor nieuwe reacties.