Sergey Ryabov Sergey Ryabov - 23 days ago 9
CSS Question

Bootstrap grid of images for small resolution

I have a simple home page: https://jsfiddle.net/1Lotp6ce/1/

There are 6 images in 2 rows (3 x 2). It works fine for larger screens, but once it gets

sm
images start overlapping. How may I fix it so for
sm
it is 2 images x 3 rows without overlapping.

Update: I'd need it not only not overlap but also to have spaces between rows.

Answer

You can do it by using only one .row element as a parent and all other as its child. But keep in mind that the size of all the images should be pixel perfect to each other (i.e. all the image sizes should be 200x200).

And use .img-responsive class on all the <img> tags.

And use column classes as <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">...</div>

Something like:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <a href="#"><img class="img-responsive" src="img-url"></a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <a href="#"><img class="img-responsive" src="img-url"></a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <a href="#"><img class="img-responsive" src="img-url"></a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <a href="#"><img class="img-responsive" src="img-url"></a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <a href="#"><img class="img-responsive" src="img-url"></a>
  </div>
  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
    <a href="#"><img class="img-responsive" src="img-url"></a>
  </div>
</div>

Working Code Snippet (use full screen):

/*HEADER*/

@import url('http://getbootstrap.com/dist/css/bootstrap.css');
#logo {
  margin-top: 12px;
}


/*BODY*/

body {
  background-color: #262626;
  padding-top: 70px;
}

@media (min-width: 1200px) {
  .container {
    max-width: 1080px;
  }
}

.row > div > a > img {
  width: 100%;
  display: block;
  margin: 10px 0;
}

.top-buffer {
  margin-top: 25px;
}

.mail {
  /*color: */
}

.mail:hover {}


/*FOOTER*/

.footer-bottom {
  min-height: 30px;
  width: 100%;
}

.copyright {
  color: #777;
  line-height: 30px;
  min-height: 30px;
  padding: 10px 0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>

  <nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
    <div class="container">
      <a href="http://feanor.cz/">
        <img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
      </a>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <a href="#">Home</a>
        </li>
        <li>
          <a href="#">Contact</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#">
          <img class="img-responsive" src="http://feanor.cz/public/img/painting/oil/8t.jpg">
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#">
          <img class="img-responsive" src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#">
          <img class="img-responsive" src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#">
          <img class="img-responsive" src="http://feanor.cz/public/img/photo/car/5t.jpg">
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#">
          <img class="img-responsive" src="http://feanor.cz/public/img/photo/product/10t.jpg">
        </a>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-4">
        <a href="#">
          <img class="img-responsive" src="http://feanor.cz/public/img/photo/interior/4t.jpg">
        </a>
      </div>
    </div>
  </div>

  <div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
    <div class="container">
      <div class="copyright navbar-left">
        © 2016, Feanor, All rights reserved
      </div>
      <ul class="nav navbar-nav navbar-right navbar-right">
        <li>
          <a target="_blank" href="#">
            <i class="fa fa-instagram fa-2x faicon"></i></a>
        </li>
        <li>
          <a target="_blank" href="#">
            <i class="fa fa-envelope fa-2x faicon"></i></a>
        </li>
        <li>
          <p>lybvit@gmail.com</p>
        </li>
      </ul>
    </div>
  </div>
</body>