CODEWITHSUNDEEP
javascripthtmlcssbootstrap-4responsive-design
xXnikosXx
xXnikosXx

Reputation: 369

Make 2 divs overlaping 2 other divs responsively

Initial div configuration on large screen devices So,I don't know how to make divs overlap eachother in such a way and I'm curious to find out if it's even possible. If it is, is it also possible to make something like that responsive too, using bootstrap or some other library? If yes, wouldn't it be needed for the divs to completely change configuration so the content still makes sense? (like in the pic below) Div configuration on portable devices - if possible If something like that can't happen (referring to the responsiveness) is there a way to make the entire thing disappear and show something else instead?

Upvotes: 0

Views: 68

Answers (2)

EGC
EGC

Reputation: 1789

This might give you somewhere to start?

You'll need to use a combination of @media queries and flex.

Look into @media queries here: CSS @media Rule

Look into flex box here: A Complete Guide to Flexbox

This code might be of some help! (Resize the output window to see the results)

See here: JSFiddle

.panel-container {
  
}

.container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.panel {
 
}

.col {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#a1 {
  background-color: blue;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#a2 {
  background-color: blue;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
}

#a3 {
  background-color: blue;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#b1 {
  background-color: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

#b2 {
  background-color: red;
  height: 100px;
  width: 100px;
  border-radius: 50%;
  line-height: 100px;
  text-align: center;
}

#b3 {
  background-color: red;
  height: 100px;
  width: 100px;
  line-height: 100px;
  text-align: center;
}

@media only screen and (max-width: 600px) {
  .container {
    display: flex;
    flex-direction: column;
  }

  .col {
    display: flex;
    flex-direction: column;
  }
}
 <div class="container">
   <div class="col">
     <div id="a1">A1</div>
     <div id="a2">A2</div>
     <div id="a3">A3</div>
   </div>
   <div class="col">
     <div id="b1">B1</div>
     <div id="b2">B2</div>
     <div id="b3">B3</div>
   </div>
 </div>

 <div class="panel-container">
   <div id="lhs" class="panel"></div>
   <div id="rhs" class="panel"></div>
 </div>

Upvotes: 1

David Ko
David Ko

Reputation: 342

its possible. use CSS flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

youll want to switch the flex direction of the container element with a css media query and so on... this is a more html/css related problem than javascript

Upvotes: 1

Related Questions