CODEWITHSUNDEEP
htmlcss
Breakfast123
Breakfast123

Reputation: 1

Making two divs responsive- side by side on big screens, under each other on mobile

I'm trying to get these two divs to play nicely together, but it won't work. I've got the big screen view down, but whatever I do, the divs won't stack on top of each other properly on small screens (mobile). Currently, my code has stacked them but is now refusing to show the second one all together. I've tried many of the suggestions in other asks, but I either have the same problem (doesn't show the second div) or they'll still show up next to each other.

I've tried many of the suggestions in other asks, but I either have the same problem (doesn't show the second div) or they'll still show up next to each other.

Big screen works, smaller screen is expected to show divs stacked on top of each other but it only shows div1.

.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
  display: flex;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .container_main1 {
    height: 69px;
    min-width: 100%;
  }
  .container_main2 {
    height: 200px;
    margin-top: 10px;
    min-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    flex: 0 0 40%;
    padding-left: 50px;
    padding-right: 20px;
  }
  .container_main2 {
    flex: 1;
    padding-right: 20px;
    padding-left: 50px;
  }
}
<div class="hiraola-banner_area-3">
  <div class="container_main1">
    <h2>Over Rijlessponsor</h2>
    <p>BLOCK OF TEXT</p>
  </div>
  <div class="container_main2">
    <h2>Benieuwd naar hoe het werkt?</h2>
    <p></p>
    <div class="myIframe">
      <iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
            </iframe>
    </div>
  </div>
</div>

Upvotes: 0

Views: 395

Answers (3)

Alex Ciu
Alex Ciu

Reputation: 148

You can also use display:inline-block for big screen and display:block for small screen. Should get almost the same result but not using flex.

.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
}

.container_main1, .container_main2 {display:inline-block;}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .container_main1 {
    display:block;
    height: 69px;

  }
  .container_main2 {
    display:block;
    height: 200px;
    margin-top: 10px;
 
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    width:50vw;
    padding-left: 50px;
    padding-right: 20px;
    vertical-align:top;
  }
  .container_main2 {
    padding-right: 20px;
    padding-left: 50px;
  }
}
<div class="hiraola-banner_area-3">
  <div class="container_main1">
    <h2>Over Rijlessponsor</h2>
    <p>BLOCK OF TEXT</p>
  </div>
  <div class="container_main2">
    <h2>Benieuwd naar hoe het werkt?</h2>
    <p></p>
    <div class="myIframe">
      <iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
            </iframe>
    </div>
  </div>
</div>

Hope this helps.

Upvotes: 0

Thanos T. M.
Thanos T. M.

Reputation: 52

Start by setting the width of the container div. Then you can set the width of the two divs to 50% for large screens and 100% for small screens. That way they will auto adjust when the viewport changes size.

Upvotes: 0

yunzen
yunzen

Reputation: 33439

You are missing 

.hiraola-banner_area-3 {
    flex-wrap: wrap;
}


.hiraola-banner_area-3 {
  padding-bottom: 60px;
  padding-top: 40px;
  display: flex;
}

@media only screen and (min-width: 0px) and (max-width: 767px) {
  .hiraola-banner_area-3 {
    flex-wrap: wrap;
  }
  .container_main1 {
    height: 69px;
    min-width: 100%;
  }
  .container_main2 {
    height: 200px;
    margin-top: 10px;
    min-width: 100%;
  }
}

@media only screen and (min-width: 768px) and (max-width: 2000px) {
  .container_main1 {
    flex: 0 0 40%;
    padding-left: 50px;
    padding-right: 20px;
  }
  .container_main2 {
    flex: 1;
    padding-right: 20px;
    padding-left: 50px;
  }
}
<div class="hiraola-banner_area-3">
  <div class="container_main1">
    <h2>Over Rijlessponsor</h2>
    <p>BLOCK OF TEXT</p>
  </div>
  <div class="container_main2">
    <h2>Benieuwd naar hoe het werkt?</h2>
    <p></p>
    <div class="myIframe">
      <iframe class="resp-iframe" src="https://www.youtube.com/embed/5VAIxwWnsVY?">
            </iframe>
    </div>
  </div>
</div>

Upvotes: 2

Related Questions