Twitter Bootstrap Question posted in

Trouble lining up images on about page using twitter bootstrap

I’m completely new to this scene and to web design in general, but I’m hoping to learn more and maybe help out some day!

As of right now, I’ve managed to get a basic home page up and running, but I read up on how to create a responsive about page yesterday using bootstrap and I can’t quite figure out why there is this mysterious space above one of the photos when I view the page in Chrome. This space causes the entire photo to become misaligned, and I don’t know where it would be coming from.

I tried searching through the stackoverflow site, but honestly, I don’t even know what I’m looking for. The closest I got to was this previous answer.

My website is skyridge.us and I’ve included the portion of the code in the body that I’m referring to: 

    <div class="row">
        <div class="col-lg-12">
            <h1 class="page-header">Our Team</h1>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/daniel-shen-450.jpg alt="">
            <h3>Daniel<br><small>Founder</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/michael-wu-450.jpg alt="">
            <h3>Michael<br><small>Technology Adviser</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/miles-shen-450.jpg alt="">
            <h3>Miles<br><small>Graphic Designer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/philip-groenwegen-450.jpg alt="">
            <h3>Philip<br><small>US History Course Developer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/fil-lekkas-450.jpg alt="">
            <h3>Fil<br><small>Speech and Debate Course Developer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/christina-shen-450.jpg alt="">
            <h3>Christina<br><small>Administrative Adviser</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/andy-mun-450.jpg alt="">
            <h3>Andy<br><small>Economics Course Developer</small></h3>
        </div>
　　　　 <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/alex-isper-450.jpg alt="">
            <h3>Alex<br><small>US Government Course Developer</small></h3>
        </div>
        <div class="col-lg-4 col-med-4 col-sm-6 col-xs-12 text-center">
            <img class="img-rounded img-responsive img-center" src=/img/dennis-wang-450.jpg alt="">
            <h3>Dennis<br><small>Biology and Physics Course Developer</small></h3>
        </div>
    </div>
Tags:

2

Answers


  1. 0

    For some odd reason, your Media Query here:

    @media (min-width: 1200px)
  .col-lg-4 {
    width: 33.33333333%;
  }
}

    Is causing this issue. I am not certain why though.
    I changed that value in my inspector to going down 1% and when i got to 31% it was perfect.

    Not sure without spending too much more time on this what the exact cause is. Hopefully this helps a tiny bit.

    enter image description here

    Login or Signup to reply.
  2. 0

    It will help if you attach some demo like this which I’ve made : https://jsfiddle.net/12345/DTcHh/9359/

    I guess it has something to do with the fact you gave almost every div the class col-med-X, when its supposed to be col-md-X.

    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12 text-center">

    and you’ve got that extra space at the start of the last row on your code…

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search