How to move div to another div on smaller screens

Question

I am trying to move a div(called panel) to the bottom under another div. but when i move the panel under the div(panel_1), there is no space under the page anymore. I want to move the div(panel) much further beneath . i should be able to scroll to get to the div(panel).

How do i achieve this?

PS: sorry for my english

 @media (max-width: 400px) { .panel { position: fixed; bottom: 0; width: 100%; } } 

 <div class="panel"></div> <div class="panel_1"></div> 

Answer 1

Declare the height of the page if not it is set to be enough to contain all of ur elements

 @media (max-width: 400px) { /* adjust to your needs */ .panel { position: fixed; bottom: 0px; width:100%; } } .body{height 1000px;} .panel { background: red; height:10px; } .panel_1{background: blue; height:10px;} 

  <div class="panel"> </div> <div class="panel_1"> </div> 

Answer 2

We have CSS properties which is margin to create space around
each side of your target element.

Hope this will help you :)

try below snippet.

 <div id="panel1" style="border:solid;width:150px;height:150px;"> </div> <div id="panel2" style="border:solid;width:150px;height:90px;margin-top:1%;"> </div>