I am currently working on a website project,but I encountered some issues while developing it.Basically,for now I am trying to create a login page.I am experiencing quite a common error in the web,which makes everything ugly and moving when the browser is resized.
/* Bordered form */
form {
margin-left: 220px;
margin-right: 220px;
background-position: top center;
}
body{
background-image: url("/images/background.jpeg");
background-position: top center;
min-width:450px;
max-width:960px;
}
/* Full-width inputs */
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
background-position : top center;
}
/* Set a style for all buttons */
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
/* Center the avatar image inside this container */
.imgcontainer {
padding-top: 60px;
position: relative;
left: 17%;
top: 200%;
width: 150%;
text-align: center;
font-size: 18px;
}
/* Avatar image */
img.avatar {
text-align: center;
width: 40%;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
/* Add padding to containers */
.container {
padding: 20px;
margin-left: 232px;
margin-right: 200px;
min-width:450px;
max-width:960px;
}
/* The "Forgot password" text */
span.psw {
float: right;
padding-top: 16px;
}
Admin Panel
The code below I posted is the code I wrote up to now.I have a feeling that the issue is really small and stupid,but I just don't see it.I know there are many topics similar to this one,but for the 2 hours I spent browsing for an answer I didn't find anything useful.Hope you can help me :)