Make my 2 divs stack on screen smaller than 600px

Question

i have problems with stacking my 2 divs on top of each other when the screen width is lower 600px. I have tried adding flexbox to it, but it does not seem to work for me as it should. HTML

<main>
  <section class="home-hero">
    <div class="hero-text">
      <h1>Psykolog<br> Mathias Spangsberg Andersen</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div class="hero-img">
        <img src="img/portræt.jpg" alt="Portræt Mathias Andersen">
        <a class="order-button" href="bestil-tid.html">Bestil tid</a>
    </div>
  </section>
  </main>

CSS FOR DESKTOP

.home-hero {
  position: relative;
  margin-top: 0px;
  background-image: url(../img/forside.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  background-blend-mode: luminosity;
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero-text {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}

.hero-img {
  display: flex;
  justify-content: center;
  width: 40%;
  height: 400px;
  background-color: grey;
  margin: 80px 40px;
}
.hero-text h1::first-line {
  font-size: 30px;
  font-style: bold;
}
.hero-text h1 {
  font-size: 25px;
  text-align: center;
  padding-top: 25px;
}
.hero-text p {
  padding: 10px 25px 0;
  text-align: left;
}
.hero-img img {
  display: block;
  width: auto;
  height: 70%;
  object-fit: contain;
  margin-left: auto;
  margin-right: auto;
  padding-top: 30px;
}
.order-button {

  width: 200px;
  height: 50px;
  background-color: #27B9E5;
  color: black;
  text-decoration: none;
  line-height: 2;
  text-align: center;
  font-size: 25px;
  margin-top: 10px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 5px;
  transition: 1s;
  margin-bottom: 20px;
}
.order-button:hover {
  background-color: #22A4CC;
  color: white;
  border-radius: 15px;
  transition: 0.3s;
}

CSS FOR TABLET

@media screen and (min-width:720px) and (max-width:1200px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;

    margin: 40px 40px;
  }
  .hero-text h1::first-line {
    font-size: 30px;
    font-weight: 900;
  }
  .hero-text h1 {
    font-size: 25px;
    text-align: center;
  }
  .hero-text p {

    margin-bottom: 100px;
    text-align: left;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    height: auto;
    background-color: grey;
    margin: 40px 40px;
  }
  .order-button {
    display: block;
    width: 70%;
    height: 10%;
    background-color: #27B9E5;
    color: black;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    margin-top: -10px;
  }
}

CSS FOR MOBILE

@media screen and (min-width:0px) and (max-width:720px) {
  .hero-img img {
      display: block;
      width: 90%;
      object-fit: contain;
      margin-left: auto;
      margin-right: auto;
  }
}
@media screen and (max-width: 720px) {
  .hero-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
  .hero-img {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
  }
}

Any suggestions is much appreciated since i really want this to work. Other corrections, suggestions and advices is more than welcome. Have a nice day

Answer 1

Use min-width and flex-wrap...

HTML

<flex-box>
  <div></div>
  <div></div>
</flex-box>

CSS

flex-box {
  display: flex;
  width: 100%;

  // magic
  flex-wrap: wrap;

  div {
    //styling
    background: #ccc;
    height: 200px;
    margin: 1em;
    flex: 1;

    // magic
    min-width: 600px;
  }
}

I wrote this from scratch so you and others can easily see how it's done. Using max-width, min-width together with flex-wrap can allow you to avoid the need for media queries for changing to stack for mobile.

Answer 2

Make your container .home-hero a flex column in your media query.

.home-hero {
    flex-direction:column;
}

Answer 3

You could achieve this by adding the following to your css:

@media screen and (max-width: 600px) {
  .home-hero {
      flex-direction: column;
   }
}

 .home-hero { position: relative; margin-top: 0px; background-image: url(../img/forside.jpg); background-size: cover; background-repeat: no-repeat; height: 100vh; background-blend-mode: luminosity; width: 100%; display: flex; justify-content: center; } .hero-text { display: flex; justify-content: center; width: 40%; height: 400px; background-color: grey; margin: 80px 40px; } .hero-img { display: flex; justify-content: center; width: 40%; height: 400px; background-color: grey; margin: 80px 40px; } .hero-text h1::first-line { font-size: 30px; font-style: bold; } .hero-text h1 { font-size: 25px; text-align: center; padding-top: 25px; } .hero-text p { padding: 10px 25px 0; text-align: left; } .hero-img img { display: block; width: auto; height: 70%; object-fit: contain; margin-left: auto; margin-right: auto; padding-top: 30px; } .order-button { width: 200px; height: 50px; background-color: #27B9E5; color: black; text-decoration: none; line-height: 2; text-align: center; font-size: 25px; margin-top: 10px; margin-left: auto; margin-right: auto; border-radius: 5px; transition: 1s; margin-bottom: 20px; } .order-button:hover { background-color: #22A4CC; color: white; border-radius: 15px; transition: 0.3s; } @media screen and (min-width:720px) and (max-width:1200px) { .hero-img img { display: block; width: 90%; object-fit: contain; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 720px) { .hero-text { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; height: auto; background-color: grey; margin: 40px 40px; } .hero-text h1::first-line { font-size: 30px; font-weight: 900; } .hero-text h1 { font-size: 25px; text-align: center; } .hero-text p { margin-bottom: 100px; text-align: left; } .hero-img { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; height: auto; background-color: grey; margin: 40px 40px; } .order-button { display: block; width: 70%; height: 10%; background-color: #27B9E5; color: black; text-decoration: none; text-align: center; border-radius: 5px; margin-top: -10px; } } @media screen and (min-width:0px) and (max-width:720px) { .hero-img img { display: block; width: 90%; object-fit: contain; margin-left: auto; margin-right: auto; } } @media screen and (max-width: 720px) { .hero-text { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; } .hero-img { display: flex; justify-content: center; flex-wrap: wrap; width: 100%; } } @media screen and (max-width: 600px) { .home-hero { flex-direction: column; } }

 <main> <section class="home-hero"> <div class="hero-text"> <h1>Psykolog<br> Mathias Spangsberg Andersen</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <div class="hero-img"> <img src="img/portræt.jpg" alt="Portræt Mathias Andersen"> <a class="order-button" href="bestil-tid.html">Bestil tid</a> </div> </section> </main>