1306 sujets

Web Mobile et responsive web design

Bonjour à tous,

Je suis débutant et j'ai réalisé cette petite grille qui fonctionne presque comme je souhaite Smiley cligne

je ne comprends pas pourquoi la règle media queries ne fonctionne pas..... Smiley decu Smiley decu

Voici le code html :


<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="content-language" content="fr" />
<title></title>
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/home.css" />
</head>
<body>
 <div class="row">
 <div class="col-1"><h2><a href="archeologie/index.html">Arch&eacute;ologie, art islamique et d'Asie</a></h2><div class="archeologie"></div></div>
<div class="col-2"><h2><a href="deco/index.html">Art d&eacute;coratif</a></h2><div class="deco"></div></div>
<div class="col-3"><h2><a href="art-premier/index.html">Art Premier</a></h2><div class="art-premier"></div></div>
<div class="col-4"><h2><a href="mobilier/index.html">Mobilier</a></h2><div class="mobilier"></div></div>
<div class="col-5"><h2><a href="mode/index.html">Mode et beaut&eacute;</a></h2><div class="mode"></div></div>
</div>
</body>
</html>


et voici la css


* {
    border:0;
    padding:0;
	margin:0;
}

* {
    box-sizing: border-box;
}
body {
	font-family: Proxima Nova Light,Helvetica Neue,helvetica,arial,"sans-serif";
    color:#222222;
}
.archeologie  { background:url('img/archeologie.jpg') no-repeat; height:360px; background-position: center;}
.deco  { background:url('img/art.jpg') no-repeat; height:360px; background-position: center;}
.art-premier  { background:url('img/art-premier.jpg') no-repeat; height:360px; background-position: center;}
.mobilier  { background:url('img/mobilier.jpg') no-repeat; height:360px; background-position: center;}
.mode  { background:url('img/mode.jpg') no-repeat; height:360px; background-position: center;}

.col-1 {width: 33.33%;}
.col-2 {width: 33.33%;}
.col-3 {width: 33.33%;}
.col-4 {width: 33.33%;}
.col-5 {width: 33.33%;}

[class*="col-"] {
    float: left;
    padding: 8px;
    border: 1px solid red;
}

.row::after {
    content: "";
    clear: both;
    display: table;
}

h2, h2 a {
    font-size: 20px;
	color:#544A4A;
    background-color: #fbfbfb;
    margin:10px 0 10px 15px;
}

h2 a:hover {
    color: #C2A661;
}

@media screen and (max-width: 1200px) {
	h2 {
		font-size: 14px;
	}
}



Merci par avance pour votre aide Smiley smile
Bonjour,

"je ne comprends pas pourquoi la règle media queries ne fonctionne pas....."

- mais si elle marche impec, mais attention ta règle "h2 a" située hors medias queries appliquée au lien des titres s'impose devant la règle h2 du media queries parce qu'elle plus précise.
upload/1497355554-66080-examiner.png

Tu peux voir aussi l'importance du poids des règles css pour mieux comprendre celles qui s'imposent:
https://css-tricks.com/specifics-on-css-specificity/
ou
http://www.zonecss.fr/cours-css/poids-des-selecteurs.html
Meilleure solution