CODEWITHSUNDEEP
javascriptjqueryhtmlcsstwitter-bootstrap
George Welder
George Welder

Reputation: 4055

Bootstrap Grid collapses the wrong way : elements lie on top of other elements

I have tried to create a grid, which shows four clients. It looks all right in the large viewport, but as soon as I start making the window smaller, things don't break down / collapse properly, but lie on top of each other. The problem is in particular with the second client box, on the top right. It seems to get hidden by box number 4, but I don't see why.

here is a js fiddle:

https://jsfiddle.net/c54nfk43/

here is the same jsfiddle without the CSS file (equally as bad):

https://jsfiddle.net/c54nfk43/1/

<?php include('header.php') ?>

  <body>
    <?php include('navigation.php') ?>

  <div class="container-fluid">
      <div class="row">
        <div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">
          <div class="row">
            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">

                <div class="left_box">
                  <div class="logo_wrapper">
                    <a href="http://www.test.com">
                      <img class="client-logo" src="img/logo.png" style="width:250px; height:auto; padding-top:15px;">
                    </a>
                  </div>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                  <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                    <p>First client, first client, this is for the first client.First client, first client, this is for the first client.First client, first client, this is for the first client. First client, first client, this is for the first client. First client, first client, this is for the first client.</p>
                </div>
            </div>

            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
              <div class="left_box">
                <div class="logo_wrapper">
                  <a href="http://www.other.com">
                  <img class="client-logo" src="img/logo.svg" style="width:200px; height:auto;">
                  </a>
                </div>
                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. </p>

                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad.</p>

                <p>Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and is pushed around by the others. It's very sad. Second client, another paragraph for the second client. This one here seems to overlap and.</p>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div class="row hidden-sm-down" style="margin: 75px;">

      </div>

      <div class="row">
        <div class="col-sm-10 offset-sm-1" style="height:500px; margin-top:50px;">


          <div class="row">
            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: white;">

                <div class="left_box">
                  <div class="logo_wrapper">
                    <a href="https://www.thirdclient.de">
                    <img class="client-logo" src="img/thirdlogo.jpg" style="width:250px; height:auto; padding-top:-20px;">
                    </a>
                  </div>
                  <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                  <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                  <p> The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>
                    <p>The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client. The glorious number three is here. This is for the third client.</p>

                </div>
            </div>

            <div class="col-xs-12 col-lg-6 no-padding" style="background-color: #e7ecef;">
              <div class="left_box">
                <div class="logo_wrapper">
                  <a href="http://www.fourthclient.com/">
                  <img class="client-logo" src="img/fourthlogo.jpg" style="width:200px; height:auto;">
                  </a>
                </div>
                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>

                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>

                <p>Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. Last but not least, one more client. Number for. How we all waited for you, Number 4. </p>
              </div>
            </div>
          </div>

        </div>
      </div>
  </div>

<?php include('footer.php') ?>

Upvotes: 0

Views: 49

Answers (1)

Chandra Shekhar
Chandra Shekhar

Reputation: 3749

issue is you are setting the height property on div.col-sm-10 remove that, it should solve the problem.

hope this helps..

Upvotes: 1

Related Questions