Salve a tutti,
in un sito che sto gestendo ovviamente con Drupal, ho creato una pagina intro che rimanda al sito principale.
La pagina funziona correttamente però vorrei adattarla con le media query di css per poterla vedere in modo più raffinato dai dispositivi mobile.
Nella pagina è semplicemente impostato un logo centrale.
Il logo è posto in un container in modo tale che sia visualizzato al centro esatto della pagina sia verticalmente che orizzontalmente:
<html>
<head>
<meta charset="UTF-8">
<title>Documento senza titolo</title>
<style type="text/css">
#box {
width:400px;
height:400px;
position:absolute;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-200px;
border:#682728 1px solid;
}
.logo{
width:300px;
height:135px;
text-align:center;
position: absolute;
left:50%;
top:50%;
margin-left: -150px;
margin-top:-67px;
}
</style>
</head>
<div id="box">
<img src="images/LOGO_intro_trasp.png" class="logo"></a>
</div>
<body>
</body>
</html>Ora vorrei che guardando la pagina da un dispositivo mobile (es. iPhone) si veda lo stesso logo al 100% dello screen ed esattamente al centro.
Ho fatto qualche tentativo ma il problema sono i margini penso. non riesco a impostarli nel modo corretto.
dove sbaglio?
Ho trovato l'errore... da pirla che sono avevo omesso questa riga tra i marcatori :
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">ora funziona molto bene senza dover apportare modifiche con le media query
jbond82