JohnDotHR JohnDotHR - 6 months ago 7
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

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.

Comments