Résolu "only screen" qui fonctionne pour le body mais pas av

bonjour,
j'essaye d'adapter un site aux Ipad & Iphone
j'ai utilisé @media only screen........

je constate que cela fonctionne pour le body mais pas pour mon style appelé "boites"
quand je change les valeurs de "boites" il ne se passe rien
mon code:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) {
	body{
		background-color:#FFF;
	height: 720px;
	margin-left:210px;	
	padding-top: 0px;
		
	}
	.boites{
	background-color:#FFF;
	height: 720px;
	margin-left:210px;	
	padding-top: 0px;
}
	}

.boites{
	background-color:#FFF;
	height: 720px;
	margin-left:10px;	
	padding-top:1px;
	overflow-x:auto;
	
}

je n'arrive pas à saisir l'erreur: pourquoi "body" est reconnu et pas "boites"
(par contre le code pour "boites" en dehors de la restriction on screen only fonctionne: le lien fonctionne)

une idée?
merci

Hello.

Tu écrases les règles de ta media-querie avec le code de .boites défini en dessous. Inverse leur ordre dans le code et ça devrait rouler.

mille merci
c'est la réponse qu'il me fallait

encore un souci, ça fonctionne sur Ipad mais pas Iphone.......grrrrrrrr.....

merci

au final il fallait 2 codes,
un pour les Ipad et un pour les Iphone:

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px)
 {
	.boites{
	background-color:#FFF;
	height: 720px;
	margin-left:210px;	
	padding-top: 1px;
	width:70000px;
	
}
	}
	
	@media only screen and (max-width: 480px), only screen and (max-device-width: 480px)
{
	.boites{
	background-color:#FFF;
	height: 720px;
	margin-left:210px;	
	padding-top: 1px;
	width:70000px;
	
}
	}

j'avais pourtant lu que celui des Ipad était aussi valable pour les Iphone (mais pas le contraire).......

je ne trouve pas de commande spécifique résolu, je le mets en haut dans le titre
merci encore
Modifié par grouck (29 Sep 2011 - 15:14)