Question 265267 in Html Question posted in
Some basic documentation can be found here.

Html – how to make 2 div under each other while reducing the screen size

how to align two

.container{
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
}
.container-part{
    width: 50%;
}
<div class="container">
      <div class="container-part">
        1
        </div>
        <div class="container-par">
          2
          </div>
      </div>

divs under each other with property display flex on reducing size.

Tags:

2

Answers


  1. 0

    you need min-width property to the container-part so that when it overflows it wraps the divs.

    https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

    what flex-wrap:wrap does is it wraps the div to come on another row when the total width of the divs exceed the width of the viewport.

    provided you missed the typo in this

    Login or Signup to reply.
  2. 0

    Try this:

     * I added media Query of max-width: 600px and added flex-direction: column;`
 * so when your screen size goes below 600px then div will show in column 

    .container{
    border: 2px solid black;
    display: flex;
    flex-wrap: wrap;
}
.container-part{
    width: 50%;
}

@media only screen and (max-width: 600px) {
.container{
    flex-direction: column;
}
}
    <div class="container">
      <div class="container-part">
        1
        </div>
        <div class="container-par">
          2
          </div>
      </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search