Shashank Shashank - 1 year ago 62
CSS Question

Bootstrap responsive design Divs overlap

I am a newbie to responsive elements in bootstrap. These two divs whose HTML is given below, in mywebapp ( Ex: ) overlap with each other in mobile screens. Resize the browser's window to see the behavior. How should I overcome that behavior?

<!-- DIV1 -->
<div class = "col-md-12 col-sm-12">
<a href= "/" id="logo-dark"> <img class="img-responsive" width="60" height="60" alt="" src="images/logo-dark-sm.png"> </a>

<!-- DIV2 -->

<div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" style="margin-top: 25px;">
<div id="DescriptionWrapper"></div>

Answer Source

The css of your logo is:

#logo-dark, #logo-light {
top: 0;
left: 0;
position: absolute;

This means your logo is going to stay in the top-left position regardless of the elements around it, that's why your next element is overlapping with the logo.

There are two ways you can solve this:

1) Replace the position:absolute; with position:relative; for smaller viewports using media queries.


  a) Add <div style="clear:both;"></div> in between the divs

  b) Leave more margin space at the second div margin-top: 35px;