JohnDotHR JohnDotHR - 1 year ago 67
Javascript Question

Making this div responsive

Could someone please explain me how I can make this div responsive using media queries? It's practically a 200px high div with sponsor logos on it. I want it to be responsive. Currently the logo's are displayed horizontally but for example, they should be stacking one on top of the other on the mobile version.

<div id="sponsors">
<a id="about" class="smooth"></a>
<div class="sponsors">
<div class="row row-centered">
<div class="col-md-4 col-centered" style="margin-top: 40px; ">
<img src="img/bridgestone.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;";>
</div>
<div class="col-md-4 col-centered" style="margin-top: 40px;">
<img src="img/sparco1.png" class="hvr-pulse" style="width: 400px; margin-top: 20px;">
</div>
<div class="col-md-4 col-centered" style="margin-top: 10px;">
<img src="img/redbull.png" class="hvr-pulse" style=" width: 300px; margin-bottom: 20px;">
</div>
</div>
</div>
</div>

#sponsors {
width: 100%;
height: 200px;
background-color: black;
background-repeat: no-repeat;
background-size: cover;
}

Answer Source

Change your sponsor height to min-height like this:

#sponsors {
    width: 100%;
    min-height: 200px;
}

Link to jsFiddle: https://jsfiddle.net/AndrewL32/e0d8my79/97/ [Dummy images use]


P.s. as you might have noticed in the fiddle, the inline margins are removed because you can achieve what you want by adding some padding to the box wrapping the images.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download