Ma media query ne fonctionne pas !

anbrdn

22 Feb 2020 à 13:41

Bonjour à tous,

Je suis bien embêté : les valeurs qui remplacent celles en dehors de ma query n'ont aucun effet sur les éléments de ma page (.zip : https://drive.google.com/drive/folders/1vR_Q9CHZkjYxys286iGU7LeGmJkvGt6c?usp=sharing ). Je ne sais plus quoi faire, et j'ai bien ajouté le tag meta viewport pour éviter le smart zoom.

Voici l'intégralité de la query :

/* Tablet Styles */
@media only screen and (min-width: 481px) and (max-width:769px) {
	body{
		width: 768px;
	}
	#wrapper{
		width: 100%;
	}
	main{
		width: 100%;	
	}
	aside{
	width: 100%;
}
}

Quelqu'un a-t-il une idée ? Merci d'avance.
Modifié par anbrdn (22 Feb 2020 - 13:43)

_laurent

Modérateur

24 Feb 2020 à 14:48

Salut,

Il faut mettre tes media queries à la fin de ton code pas au début.
Ici, quand ta média queries s'active, c'est comme si tu avais :

body {
	width: 768px;
}
body {
	width: 1366px;
}

et dans l'ordre naturelle des choses le second overide le premier.
Modifié par _laurent (24 Feb 2020 - 14:48)

Web Mobile et responsive web design

Ma media query ne fonctionne pas !