Why are my elements overlapping when I resize the page. I am using percentages
Question
Whenever I resize my html page elements start to overlap each other. I have tried to avoid this by using percentages rather than pixels wherever I can. Here is my code of what I have so far, any ideas? How do you like the design btw? :) What's weird is that the vertical line in the middle is where it is supposed to be when the window is resized, but everything else is not.
*:focus { outline: none; } body { background: #ced4da; margin: 0; padding: 0; font-family: sans-serif; } .login-box { width: 300px; height: 170px; background: rgba(0,0,0,0); color: white; top: 50%; left: 33%; position: absolute; transform: translate(-50%,-50%); box-sizing: border-box; padding-top: 12.5px; } .email-input-field { position: relative; } .password-input-field { position: relative; } .email-input-field i { position: absolute; left: 0; top: 4px; padding: 9px 8px; color:darkgrey; transition: 0.3s; } .password-input-field i { position: absolute; left: 0; top: 4px; padding: 9px 12px; color:darkgrey; transition: 0.3s; } .email-input-field input:focus + i, .password-input-field input:focus + i { color:dodgerblue; } .login-box .email-input-field, .password-input-field { margin-bottom: 10px; } .login-box input[type="email"], input[type="password"] { border: none; background: white; height: 40px; font-size: 12px; width: 83%; padding-left: 50px; } .login-box input[type="submit"] { border: none; background-color: #3DBB96; color: white; outline: none; height: 40px; width: 100%; font-size: 15px; font-weight: lighter; } ::placeholder { color: grey; } .vertical-line { border-left: 1px solid darkgrey; width:1px; height: 170px; top: 50%; left:50%; position:absolute; transform: translate(-50%,-50%); box-sizing: border-box; } .side-text { top: 50%; left:63%; position:absolute; transform: translate(-50%,-50%); line-height: 100%; } .side-text p { font-weight: lighter; } .side-text h1 { font-weight: normal; }
<!DOCTYPE html> <html> <head> <title> Admin Login </title> <link rel="stylesheet" type="text/css" href="css/Login.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class = "login-box"> <form> <div class = "email-input-field"> <input type = "email" name = "emailPost" placeholder = "Email"> <i class = "fa fa-envelope fa-lg" aria-hidden = "true"></i> </div> <div class = "password-input-field"> <input type = "password" name = "passwordPost" placeholder = "Password"> <i class = "fa fa-lock fa-lg" aria-hidden = "true"></i> </div> <input type = "submit" name = "submit" value = "Login"> </form> </div> <div class = "vertical-line"></div> <div class = "side-text"> <h1> COLD OPS </h1> <p> ADMINISTRATION PANEL </p> </div> </body> </html>
1 answers
solution1
0 2018-06-01 18:02:46
制作响应式网页时，请在您的所有网页中添加以下元素：（在head标签内）示例
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
my web page content overlap and the images distort when i resize the page.
Why does my divs keep overlapping when I resize the screen?
I am using “@media print” for printing my html page. Here I am getting problum with background color is not visible of modelbox
Why my page scroll when I resize on my browser?
position of elements move when I resize page
Why when I am changing my navbar position to relative it is not overlapping with my text?
jquery not working on my html page. I am not getting alert onLoad of the page as expected
Elements are overlapping to an image when I am resizing the browser
My menu and heading move when I resize page, what am i doing wrong?
How do I make my elements in place when I resize the page?
Related Tags