CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
divisionkiller
divisionkiller

Reputation: 316

Bootstrap strange grid alignment

May some of you explain me why my bootstrap grid is acting strange ?

The final result must be like the picture below : enter image description here

But when i code it and check it browser version vs psd version mine is different... what is going on ? The boxes in red are from my browser view ( chrome ).

enter image description here

Any clue ?

.facts { color: #fff; background: linear-gradient(  rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45)), url(https://s27.postimg.org/7kjcvsxc3/facts_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0; width: 100%; min-height: 505px; }
.facts-content { text-align: center; }
.facts-content h3 { font-family: "Gotham-Book", sans-serif; font-size: 47px; line-height: 55px; padding: 0 5px; text-transform: uppercase; margin: 38px 0 41px 0; }
.facts-content h3 span { color: #00c0ff; }

.item h4 { font-family: "Gotham-Black", sans-serif; font-size: 40px; line-height: 49px; padding: 0 5px;  }
.item h4 > span { font-family: "Gotham-Light", sans-serif; }
.item p { font-family: "Lato-Regular", sans-serif; font-size: 16px; line-height: 22px; padding: 0 5px;  }
.item a { display: block; margin-bottom: 27px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<section class="facts">
  <div class="container">
    <div class="facts-content">
      <h3>some <span>facts</span> about us</h3>
      <div class="row">
        <div class="col-md-3 col-sm-3">
          <div class="item">
            <a href="#">
              <img src="https://s16.postimg.org/z29j3y5s1/ideas.png" width="124" height="124" title="someText" alt="someText">
            </a>
            <h4>14<span>&#37;</span></h4>
            <p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
          </div>
          <!-- item -->
        </div>
        <!-- col-md-3 -->

        <div class="col-md-3 col-sm-3">
          <div class="item">
            <a href="#">
              <img src="https://s16.postimg.org/4jjqizgld/green_earth.png" width="125" height="126" title="someText" alt="someText">
            </a>
            <h4>25<span>&#37;</span></h4>
            <p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
          </div>
          <!-- item -->
        </div>
        <!-- col-md-3 -->

        <div class="col-md-3 col-sm-3">
          <div class="item">
            <a href="#">
              <img src="https://s16.postimg.org/4yzlpqrwh/leafs.png" width="126" height="126" title="someText" alt="someText">
            </a>
            <h4>75<span>&#37;</span></h4>
            <p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
          </div>
          <!-- item -->
        </div>
        <!-- col-md-3 -->

        <div class="col-md-3 col-sm-3">
          <div class="item">
            <a href="#">
              <img src="https://s16.postimg.org/5d0xpcc01/solar_panels.png" width="130" height="132" title="someText" alt="someText">
            </a>
            <h4>90<span>&#37;</span></h4>
            <p>Proin hendrerit velit a lectus vel nibh tincidunt</p>
          </div>
          <!-- item -->
        </div>
        <!-- col-md-3 -->
      </div>
      <!-- row -->
    </div>
    <!-- facts-content -->
  </div>
  <!-- container -->
</section>
<!-- facts -->

Upvotes: 0

Views: 76

Answers (1)

i7nvd
i7nvd

Reputation: 1318

If you're concerned about specific pixel alignment, don't be. In a mobile world with so many different screen sizes and resolutions, counting in exact pixels doesn't make a lot of sense. Your output looks good and captures the spirit of the PSD. Don't try to line things up 100% exactly. It's a futile effort that adds virtually no benefit.

Upvotes: 1

Related Questions