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%',
});
});
});