Bootstrap 4 grid system div disappears on collapse

Hello guys I'm trying to make bootstrap grid system with multiple rows in each other and it works fine until it collapses to mobile size. When it's collapsed for mobile one of my divs disappears.It basically becomes part of my larger div on right side of screen. The problem starts below 768px screen size.Here is the code:
HTML:

<section id="changeImageHover" class="container-fluid">
<div class="row">
 <div class="col-md-7">
  <div class="container-fluid topLayer changeImageOne">
    <img src="https://placebear.com/716/400" alt="white image">
    <h3>wwwwwwwwwwwwww</h3>
    <p>asdasdasdsadasd</p>
  </div>
  <div class="row bottomLayer">
    <div class="col-md-6 changeImageTwo">
      <img src="https://placebear.com/358/400" alt="mouth">
      <span>asdddddddddd</span>
    </div>
    <div class="col-md-6 changeImageThree">
      <img src="https://placebear.com/358/400" alt="blue image">
      <h3>asdasdasd</h3>
      <p>asdasdasdsad</p>
    </div>
  </div>
 </div>

 <div class="col-md-5">
  <img id="changeThisImage" src="https://placebear.com/511/800" alt="girl pink background">
 </div>
</div>
</section>

My second col-md-6 is the one that disappears. It has class changeImageThree.
SCSS:

#changeImageHover {
    padding: 0;
    margin: 0;
    .row {
        margin: 0;
        padding: 0;
        .col-md-7{
            cursor: pointer;
            padding: 0;
            margin: 0;
            height: 800px;
            img {
                height: 400px;
                width: 100%;
            }
            h3 {
                font-family: 'Montserrat', sans-serif;
                font-weight: bold;
                font-size: 25px;
                position: absolute;
                top: 50%;
                left:19.5%;
                transform: translate(-19.5%,-50%);
            }
            p {
                font-family: 'Montserrat', sans-serif;
                font-weight: bold;
                font-size: 14px;
                padding: 0;
                margin: 0;
                position: absolute;
                top: 56%;
                left:35%;
                transform: translate(-35%,-60%);
            }
            .container-fluid {
                padding: 0;
                margin: 0;
            }
            .changeImageThree {
                height: 400px;
            }
            .col-md-6 {
                padding: 0;
                margin: 0;
                h3 {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 20px;
                    position: absolute;
                    top: 50%;
                    left: 38%;
                    transform: translate(-38%,-50%);
                }
                p {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 14px;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    top: 56%;
                    left:19%;
                    transform: translate(-17%,-50%);
                }
                span {
                    font-family: 'Montserrat', sans-serif;
                    font-weight: bold;
                    font-size: 14px;
                    padding: 0;
                    margin: 0;
                    position: absolute;
                    top: 54%;
                    left:36%;
                    transform: translate(-36%,-54%);
                }
            }
        }
        .col-md-5 {
            height: 800px;
            padding: 0;
            margin: 0;
            img {
                height: 800px;
                width: 100%;
            }
        }
    }
}

Here is the codepen so you can better understand my problem https://codepen.io/Karadjordje/pen/LWNLzN

Answers 1

  • The problem is because of the height: 800px on the col-md-7.

    Also, the code is not using Bootstrap grid properly. For example, the immediate children of the col-md-7 should be a single row with a col-md-12, and the 2 col-md-6 below instead of the container-fluid.

    Updated: https://codepen.io/anon/pen/GWZMVj


Related Articles