CODEWITHSUNDEEP
htmlcssflexbox
Ghayas Ud Din
Ghayas Ud Din

Reputation: 335

Displaying 2 divs side by side and 3rd div under 2nd div on desktop and displaying 3rd div under 1st and 2nd div in mobile screen

I am trying to create 3 divs using flexbox. i want 1st and 2nd div to be side by side on desktop and mobile screen but i want 3rd div to be under 2nd div in desktop screen but in mobile screen i want 3rd to be under 1st and 2nd div. Can anyone help me with that? i would really appretiate

.main-div {
  display:flex;
  flex-direction: row
}
.child-div-1 {
  background-color: #555;
  width:200px;
  height:400px;
}
.child-div-2 {
  background-color: red;
  width:200px;
  height:200px;
}
.child-div-3 {
  background-color: green;
  width:200px;
  height:200px;
}

@media only screen and (max-width: 991px) {

}
<div class="main-div">
  <div class="child-div-1"></div>
 <div>
    <div class="child-div-2"></div>
    <div class="child-div-3"></div>
 </div>
</div>

I am trying to make this I am trying to make this

Upvotes: 0

Views: 287

Answers (1)

Reyot
Reyot

Reputation: 486

body {
    padding: 0;
    margin: 0;
}
.main-div {
  /*display:flex;*/
  /*flex-direction: row;*/
  width: 100%;
  padding: 0;
  margin: 0;
  height: auto;
}

.main-div > div {
    padding: 0;
    margin: 0;
    display: inline-block;
}

.child-div-1 {
  background-color: #555;
  width:200px;
  width: 48%;
  height:400px;
  float: left;  /*this part somehow did the trick*/
}

.child-div-2 {
  background-color: red;
  width: 200px;
  width: 48%;
  height:200px;
  vertical-align: top;  /*to remove extra gaps */
}

.child-div-3 {
  background-color: green;
  width:200px;
  height:200px;
}

/*@media only screen and (max-width: 991px) {

}*/

@media (max-width: 991px) {
    .child-div-3 {
        width: 100vw;
    }

}

@media (min-width: 991px) {
    .child-div-3 {
        width: 200px;
    }

}
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
</head>
<body>
<div class="main-div">
    <div class="child-div-1" style=""></div>
    <!-- <div> -->
        <div class="child-div-2"></div>
        <div class="child-div-3"></div>
    <!-- </div> -->
</div>
</body>

This code somehow did what you asked for. I used display: inline-block all div inside main-div, then used float: left for child-div-1, then used @media to increase the width for small screens. I used width: 48% instead of pixels for width of first and second div to view the result. You can set them to change according to the devices.

PS: I don't know how float: left worked here

Upvotes: 1

Related Questions