Move a Div inside a Div below on screen resize.

ike · October 3, 2018

I have a login script I want to place over an image which I believe I have done. However, I would like to move the login script div below the image div on small screens.

I can accomplish this with separate divs using mobile-collapse but can seem to make it work with the div inside the other div.

Any suggestions would be great!

Thanks!!

<!doctype html>
<html>
<head>

<style>

*{
padding: 0px auto;
margin: 0px auto;
}

img {
max-width: 100%;
height: auto;
}

div.image-box {
      position: relative;
   border: 1px solid black;
   width: 95%;
   height: 500px;
   padding: 0px auto;
   margin: 0px auto;
}

div.login {
   position: absolute;
   float: right;
   top: 25px;
   right: 25px;
   width: 175px;
   height: 175px;
   padding: 15px;
   background-color: white;
   border: 2px solid red;
background-color: rgba(0, 0, 0, 0.25);
}

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

div.mobile-collapse {
width: auto;
margin-right: 0px;
float: none;
}

div.image-box {
      position: relative;
   border: 1px solid black;
   width: 90%;
   height: 250px;
   padding: 0px auto;
   margin: 0px auto;
}
}

</style>

</head>

<body>

<div class="image-box">

<div class="login mobile-collapse">Login Div</div>
</div>

</body>
</html>

ike · October 4, 2018

I've got it working to some degree but not sure it is best practice. Just curious Is what I've done suitable? I added position: static; to the login div on screen resize and gave it enough top margin to move below the image div. It was overlapping the body-content div so I gave the body-content div enough top margin to move below the login div.

Here is my new code.

<style>

*{
padding: 0px auto;
margin: 0px auto;
}

img {
max-width: 100%;
height: auto;
}

div.image-box {
      position: relative;
   border: 1px solid black;
   width: 100%;
   height: 500px;
   padding: 0px auto;
   margin: 0px auto;
}

div.login {
   position: absolute;
   float: right;
   top: 25px;
   right: 25px;
   width: 175px;
   height: 175px;
   padding: 15px;
   background-color: white;
   border: 2px solid red;
   background-color: rgba(0, 0, 0, 0.25);
}

div.body-content{
width: 100%;
height: 500px;
background-color: #333;
}

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

div.body-content{
margin-top: 275px;
width: 100%;
height: 500px;
background-color: #333;
}

div.mobile-collapse {
width: auto;
margin-right: 0px;
float: none;
}

div.image-box {

   border: 1px solid black;
   width: 100%;
   height: 250px;
   padding: 0px auto;
   margin: 0px auto;
}

div.login {
   position: static;
   right: 25px;
   width: 175px;
   height: 175px;
   padding: 15px;
   margin: 275px auto 0px auto;
   background-color: white;
   border: 2px solid red;
   background-color: rgba(0, 0, 0, 0.25);
}
}

</style>

</head>

<body>

</body>
</html>

Sign In

Move a Div inside a Div below on screen resize.

Recommended Posts

ike

Link to comment

Share on other sites

ike

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity