sydluce sydluce - 6 months ago 16
HTML Question

How to make one container push another down in mobile view?

I want container 2 to be fully visible but the boxes in box2 cover it in mobile view. I don't want the size to be any different for the boxes in box2 I just want container 2 to be pushed down so it can be fully visible in mobile.









<div class="container">
<div class="box-container">
<div class="box1">

</div>
<div class="box2" id="box">
<div class="box1" style="background-color: blue; height: 50%;"></div>
<div class="box1" style="background-color: green; height: 50%;"></div>
<div class="box1" style="background-color: yellow; height: 50%;"></div>
<div class="box1" style="background-color: orange; height: 50%;"></div>
</div>
</div>
</div>
<div class="container-2">
</div>





body {
margin: 0;
width: 100%;
}

.container {
width: 100%;
height: 100vh;
background-color: rgb(152, 152, 152);
}
.container-2 {
width: 100%;
height: 100vh;
background-color: rgb(46, 6, 6);
}
.box-container {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
width: 100%;
height: 100%;
}

.box1 {
background-color: rgb(65, 186, 186);
width: 50%;
height: 100%;
}
.box2 {
background-color: rgb(92, 191, 124);
width: 50%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}

@media (max-width: 600px) {
.box1 {
background-color: rgb(65, 186, 186);
width: 100%;
height: 50%;
}
.box2 {
background-color: rgb(92, 191, 124);
width: 100%;
height: 50%;
}
}

Answer

Your problem is because you have inline CSS setting height:50% to .box1 inside #box, which vertically (in mobile view) would sum up to 200% therefore covering the .container-2, so set in mobile view to 25%

body {
  margin: 0;
  width: 100%;
}
.container {
  width: 100%;
  height: 100vh;
  background-color: rgb(152, 152, 152);
}
.container-2 {
  width: 100%;
  height: 100vh;
  background-color: rgb(46, 6, 6);
}
.box-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100%;
}
.box1 {
  background-color: rgb(65, 186, 186);
  width: 50%;
  height: 100%;
}
.box2 {
  background-color: rgb(92, 191, 124);
  width: 50%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
#box .box1 {
  height: 50%
}
#box .box1:nth-child(3n+1) {
  background: blue
}
#box .box1:nth-child(n+2):nth-child(-n+3) {
  background: red
}
@media (max-width: 600px) {
  #box .box1 {
    height: 25%
  }
  .box1 {
    background-color: rgb(65, 186, 186);
    width: 100%;
    height: 50%;
  }
  .box2 {
    background-color: rgb(92, 191, 124);
    width: 100%;
    height: 50%;
  }
}
<div class="container">
  <div class="box-container">
    <div class="box1">

    </div>
    <div class="box2" id="box">
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
      <div class="box1"></div>
    </div>
  </div>
</div>
<div class="container-2">
</div>