Bonjour, 

J'ai un problème avec les media queries sur Google Chrome 

j'ai un max-width a 1199px pourtant l'écran change a 960Px, ce bug ne se produit pas sur l'outil responsive de google chrome mais seulement quand on réduit la page ou quand on réduit avec inspecter, il ne se produit pas non plus sur firefox,

et chose la plus étonnante c'est que le bug est survenu après avoir changer la taille d'une image, et même en retirant ce que je venais d'écrire, le bug reste, il est présent sur deux ordinateurs différent 

je commence a avoir mal a la tête de pas comprendre d'où il vient 

quelqu'un a une idée? 

Merci de votre aide!

Petit up, j'ai aussi un background qui n'est sur aucune taille que je n'ai créer :/  

-
Edité par jbjb17 12 octobre 2020 à 10:54:04

Bonjour,

Impossible de te répondre sans voir tes codes HTML et CSS.

Nous ne sommes pas devins, tu dois nous aider à t'aider... 

Bonjour, auriez vous une page en ligne, un codepen ou jsfiddle pour que l'on puisse tester dans le navigateur?

Merci de colorer votre code à l'aide du bouton Code

Les forums d'Openclassrooms disposent d'une fonctionnalité permettant de colorer et mettre en forme les codes source afin de les rendre plus lisibles et faciles à manipuler par les intervenants. Pour cela, il faut utiliser le bouton de l'éditeur, choisir un des langages proposés et coller votre code dans la zone prévue. Si vous utilisez l'éditeur de messages en mode Markdown, il faut utiliser les balises <pre class="brush: xml;">Votre code ici</pre>.

Merci de modifier votre message d'origine en fonction.

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : problème media queries)

Liens conseillés

• Règles générales du forum

Non je n'ai rien d'installé pour tester le code directement sur une page web 

/* general */

body {
	font-size: 15px;
	color: #454545;
	padding: 0;
	margin: 0;
	line-height: 1em;
	box-sizing: border-box;
	font-family: "roboto", sans-serif;
}

.zone {
	width : 100%;
}

.container {
	max-width: 1140px;
	margin: 0 auto;
	overflow: hidden;
	
}

.element {
	font-size: 1em;
	margin: 0;
	padding:0 15px 0 15px ;
	display: inline-block;
	box-sizing: border-box;
	margin-right: -0.25em;
	vertical-align: top;
}

.nopadding {
	padding: 0;
}

.col-1x1 {
	width: 100%
}

.col-1x2 {
	width: 50%
}

.col-1x4 {
	width: 25%
}

.col-3x4{
	width: 75%
}
.col-1x6 {
    width: 16.6666%;
}
.col-5x6 {
    width: 83.33%;;
}

.col-1x3 {
	width: 33.333333%
}

.col-2x3 {
	width: 66.6666666%
}

.col-7x12 {
	width: 58.33%;
}

.col-5x12 {
	width: 41.66%;
}

a {
	text-decoration: none;
	color: #333333;
}

ul, li {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display: inline-block;
}



/* media queries general */


@media (max-width: 1199px) {

	body{
		font-size: 13px;
	}

	.container {
		max-width: 960px;
	}

}

@media (max-width: 991px) {

	.container {
		max-width: 720px;
	}
}

@media (max-width: 767px) {

	body {
		font-size: 12px;
	}
	.container {
		max-width: 540px;
	}

}

Sakut, je pense qu'il y a un problème dans les règles de tes media queries.

Supposons que mon écran fasse 700px, quelle règle va s'appliquer?

Dans tous les cas je suis en dessous de  767px, de 991px et de 1199px? essai plutot avec des min-width pour voir.

Cdt