lundi 20 avril 2015

Issue with Bootstrap grid alignment in smaller viewports

On the following website: http://ift.tt/1D7fy4I - there is a feature on the home page - 9 red boxes inside a .row with some copy text. However the following issue is occuring as shown in the screenshot:

I don't understand why each of the <div class="col-md-4 col-sm-6"> are not appearing in neat rows of 2 and why some are jutting out visually such as the "Facial recogniton" and "Green Screen" boxes. Please may I have some help resolving the issue and an explanation? Thank you.

enter image description here

Here is the HTML:

<div class="row">
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-camera"></i> Flawless Design</h4>
        Our photo booths feature Canon DSLR cameras that capture the images with great colour and picture quality.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-video-camera"></i> HD Video</h4>
        Our photo booths give users the opportunity to record 1080p high definition video during their event.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-picture-o"></i> Bespoke Prints</h4>
        Our booths feature a state-of-the-art Mitsubishi Dye Sub printing system to give you amazing, professional quality prints.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4>Prop Box</h4>
        Our Booths come with a customised prop box bursting with fun items to enhance the photo booth experience.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-smile-o"></i> Facial Recognition</h4>
        The latest facial recognition technology allows people in the booth to apply a wide variety of digital props on their faces.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-hand-o-up"></i> Touch Screen</h4>
        Our Booths are operated by a large, user-friendly touch screen. This allows you to discover all the exciting features easily.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-user"></i> Booth Attendant</h4>
        A professional booth attendant will be avail throughout the evening to assist with an queries.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-users"></i> Green Screen</h4>
        Green screen technology allows you to customise the backgrond of photos and videos. Including 3D.
      </div>
    </div>
    <div class="col-md-4 col-sm-6">
      <div class="fa-hover">
        <h4><i class="fa fa-facebook-square"></i> Facebook Upload</h4>
        Share your booth photos with friends instantly on Facebook from our photo booth.
      </div>
    </div>
</div>

Aucun commentaire:

Enregistrer un commentaire