Przy zmniejszaniu szerokości okna: napis email i hasło oraz okienka zaczynają szaleć. Jak ustalić,by nie latały?
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<meta charset="UTF-8">
<script type="text/javascript" src="www.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="www.css" type="text/css" />
<script src="www.js"></script>
</head>
<body>
<div class="menu">
<div class="formularz">
<form action="logowanie.php" method="post" id="loginForm">
<label for="email" style="color:white;">e-mail :</label><input type="email" name="email" id="email" required></label></br>
<label for="haslo" style="color:white;">hasło :</label><input type="haslo" name="haslo" id="haslo" required></label>
<input type="submit" value="Zaloguj" style="position:relative;top:5vh; left:75%;">
</form>
</div>
</div>
</div>
<div class="main">
</div>
<div class="footer"></div>
</body>
</html>
body{
width:100%;
height:auto;
padding:0;
margin:0;
}
.menu{
width:100%;
height:18.5vh;
background-color:black;
}
.formularz{
margin: auto;
padding: auto;
width: 15%;
height:auto;
position: relative;
top:3.5vh;
left:100%;
}
input[type=email]{
float:right;
width: 20vh;
height: auto;
}
input[type=haslo]{
float:right;
width: 19.8vh;
height: auto;
}
label[for=haslo]{
position: relative;
top: 2.4vh;
left:0.91vh;
}
label[for=email]{
position: relative;
top: 0.1vh;
left:0.91vh;
}
.main{
width:100%;
height:100vh;
background-color:#3299CC;
}
.footer{
width:100%;
height:20vh;
background-color:black;
}
$(document).ready(function(){
$('.formularz').each(function(){
$('.formularz').animate({
left:'83.8%',
});
});
});