Ciao ragazzi, sto avendo una serie di problemi ad adattare e fissare due elementi input sia per la versione desktop, sia per quella da cellulare.
Quando adatto tutto per la versione desktop e apro la pagina web da cellulare, gli elementi sono sfalsati.
In sostanza, questo è ciò che accade:
Immagine
Qui di seguito il codice, dove sicuramente avrò fatto qualche casino con i CSS (sto ancora imparando)
css
Codice:
#boxWrapper {
position: relative:
width: 100%;
height:100%;
}
.image_bg {
position: absolute;
top: 50%;
left: 50%;
background-image: url(imgs/bg2.png);
background-position: center top;
height: 100%;
width: 100%;
background-repeat: no-repeat;
}
@media (max-width: 500px) {
.image_bg {
min-width: 90%;
}
}
.input_user {
position: absolute;
top: 37.6%;
left: 44.3%;
}
.input_pass {
position: absolute;
top: 46.1%;
left: 44.3%;
}
html
Codice HTML:
<div id="boxWrapper">
<div class="image_bg">
</div>
<input class="input_user" type="text" name="login" id="username" placeholder="user" />
<input class="input_pass" id="password" type="password" name="pass" placeholder="password" />
</div>