Twitter Bootstrap Question posted in

Recreate Github's responsive logos' showcase – Twitter bootstrap

Explanation

I’m trying to recreate the logo showcase on the bottom of Github’s site (it only appears if signed off). When inspecting it, the logos’ size changes based on the screen resolution (as you can see below), but in my code (which I tried to do the most similar to Github’s) nothing happens; it stays the same size for every resolution.

enter image description here

Code

As I’m using Bootstrap 3.3.7, which doesn’t support flexbox (at least it didn’t work when writing the specific css as html classes), I had to write the css.

You can also see it in JSFiddle and in “fullscreen mode”.

.logos {
    background-color: rgb(255, 255, 255);
    padding: 0;
}

.logos .text-center {
    box-sizing: border-box;
    display: block;
}

.logos ul {
    text-align: center;
    filter: grayscale() !important;
    display: flex !important;
    list-style: none;
    -webkit-box-pack: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    padding-left: 0;
    margin-top: 16px;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.logos li {
    display: list-item;
    text-align: -webkit-match-parent;
    box-sizing: border-box;
}

.logos .logo-img {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: auto;
    margin: 10px 20px;
    padding-right: 0 !important;
    padding-left: 0 !important;
}
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    </head>
    <body>
        <section class="logos">
            <div class="container">
                <div class="row">

                    <div class="text-center">
                        <ul>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/UPabVoZ.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/UPabVoZ.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/sT2RPP2.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/UPabVoZ.png" alt=""></a></li>
                            <li><a href="#"><img class="logo-img" src="http://i.imgur.com/sT2RPP2.png" alt=""></a></li>
                        </ul>
                    </div>

                </div>
            </div>
        </section>
        
        <script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    </body>
</html>

Thanks in advance,
Luiz.

Tags:

3

Answers


  1. 0

    I would recommend using media queries to help size the images at specific screen sizes. Here’s an example:

    CSS

    @media (max-width: 768px /* Or whatever you want */) {
   .logos .logo-image {
      width: 100px; /* Once again, whatever you want */
   }
}

    Here’s a link that explains media queries: https://www.w3schools.com/css/css_rwd_mediaqueries.asp

    Good luck!

    Login or Signup to reply.
  2. 0

    You can use the picture-element. See here

    Login or Signup to reply.
  3. 0

    First of all get rid of all that bootstrap because it’s ugly and confusing, you can get rid of 3 extra container divs without it, and it doesn’t support flexbox yet apparently? (Bootstrap 4 is supposed to use it if that is out, I don’t know because I prefer not to use Bootstrap if you couldn’t tell)
    Then use flexbox and set the img to have max-width: 100%; to maintain aspect ratio. Mess around with the justify-content as needed:

    .logos {
  dislay: flex;
  flex-direction: column;
}

.top-logos {
  display: flex;
  justify-content: center;
}

.bottom-logos {
  display: flex;
  justify-content: space-around;
}

img {
  max-width: 100%;
}
    <section class="logos">
  <div class="top-logos">
    <a href="#"><img class="logo-img large" src="http://i.imgur.com/UPabVoZ.png" alt=""></a>
    <a href="#"><img class="logo-img large" src="http://i.imgur.com/UPabVoZ.png" alt=""></a>
    <a href="#"><img class="logo-img small" src="http://i.imgur.com/sT2RPP2.png" alt=""></a>
  </div>
  <div class="bottom-logos">
    <a href="#"><img class="logo-img large" src="http://i.imgur.com/UPabVoZ.png" alt=""></a>
    <a href="#"><img class="logo-img small" src="http://i.imgur.com/sT2RPP2.png" alt=""></a>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search