Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.
Media Queries ne fonctionne pas
Résolu
Bonjour,
J'ai présentement une feuille de style avec mes media queries dans le bas. Le truc, c'est que seulement les deux premières règles fonctionnent, mais pas celle pour les appareils de moins de 768px.
@media only screen and (max-width: 1024px) {
nav {display: none;}
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
.retournerContainer{display: none;}
#Nouvelles aside{display: none;}
.galerie-container{
grid-template-columns: 33.3% 33.3% 33.3%;
}
}
@media only screen and (max-width: 768px) {
.retournerContainer{display: none;}
#Nouvelles aside{display: none;}
.galerie-container{
grid-template-columns: 1fr;
padding: 1em;
grid-row-gap: 100px;
}
}
Re:
Ah voilà 😉
Ca venait bien du code HTML 😉
Mais surtout corriges les erreurs détectés par le W3C, ça t'évitera d'autres erreurs 😉
Si tu n'as plus de questions/suggestions, tu peux mettre en "Résolu" 😉
Problème résolu...
J'avais oublié de mettre ça dans la balise <head>...
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
Re:
Peut-être que si tu corriges les erreurs HTML, automatiquement cela résoudra sûrement ton problème vu que le code CSS n'a aucune erreur 😉
Et mon code css est validé
J'ai un problème de structure dans ma nav, mais pas vraiment de problèmes au niveau de mon galerie-container...
Re:
Analyse ton code HTML avec le service de validation du W3C, tu verras, tu utilises beaucoup d'éléments obsolètes...
Voilà
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<meta charset="utf-8">
<title>SLIPKNOT (Site non officiel)</title>
<link rel="stylesheet" href="css/normalize.css">
<link media="screen" rel="stylesheet" href="css/style.css">
<style>
@import url('https://fonts.googleapis.com/css?family=Viga&display=swap');
</style>
<link rel="icon" href="favicon.ico" />
</head>
<body>
<header>
<nav id="sec-nav">
<div class="container">
<li><a href="photos.html">Membres</a></li>
<li><a href="plan.html">Plan du site</a></li>
<li><a href="sources.html">Sources</a></li>
<li><a href="nous-joindre.html">Nous joindre</a></li>
</div>
</nav>
<div class="container" id="haut">
<a href="index.html">
<!--<h1>Titre principal</h1> -->
<img src="images/sk-logo-red.0a2db178.png" alt="Slipknot logo">
</a>
</div>
<nav id="main-nav">
<div class="container">
<ul>
<li><a href="index.html">ACCUEIL</a></li>
<li><a href="discographie.html">DISCOGRAPHIE</a></li>
<li><a href="nouvelles.html">NOUVELLES</a></li>
<li><a href="photos.html">MEMBRES</a></li>
<li><a class="bouton" href="concerts.html">CONCERTS</a></li>
</ul>
</div>
</nav>
</header>
<main class="container">
<h1>Galerie</h1>
<div id="hero">
<video playsinline autoplay muted loop poster="placeholder.jpg" id="bgvideo" width="x" height="y">
<source src="videos/Pexels Videos 2421545.mp4" type="video/mp4">
</video>
</div>
<div class="galerie-container">
<figure>
<a href="pages_galerie/1.html">
<img src="images/galerie/petit/maxresdefault.jpg" alt="Slipknot au FEQ 2019">
<figcaption>Slipknot au FEQ en été 2019</figcaption>
</a>
</figure>
<figure>
<a href="pages_galerie/2.html">
<img src="images/galerie/petit/download.jpg" alt="Corey Taylor">
<figcaption>Corey Taylor, le chanteur</figcaption>
</a>
</figure>
<figure>
<a href="pages_galerie/3.html">
<img src="images/galerie/petit/download (1).jpg" alt="Guitariste">
<figcaption>Guitariste</figcaption>
</a>
</figure>
<figure>
<a href="pages_galerie/4.html">
<img src="images/galerie/petit/download (2).jpg" alt="Shawn Crahan">
<figcaption>Shawn Crahan</figcaption>
</a>
</figure>
<figure>
<a href="pages_galerie/5.html">
<img src="images/galerie/petit/download (3).jpg" alt="Percussions">
<figcaption>Percussions</figcaption>
</a>
</figure>
<figure>
<a href="pages_galerie/6.html">
<img src="images/galerie/petit/download (4).jpg" alt="Bassiste">
<figcaption>Bassiste</figcaption>
</a>
</figure>
</div>
</main>
<div class="retournerContainer">
<a class="bouton" href="#haut"> Retourner en haut de la page</a>
</div>
<footer>
<div class="container">
<p>Créateur: Alexandre Mercier</p>
<p>Adresse mail: <a href="mailto:amercier@edu.cegepgarneau.ca"> amercier@edu.cegepgarneau.ca</a></p>
</div>
</footer>
</body>
</html>
Re:
Analyse ton code avec le service de validation CSS du W3C.
S'il indique qu'il n'y a pas d'erreur, poste ton code HTML sur le topic 😉
@Kam3leoN Ça ne fonctionne pas même sans.
@Jerem971 Je ne vois pas d'accent, et les espaces sont pour sélectionné l'objet enfant.
J'ai ajouté d'autres règles, tout ce qui est après et avant la règle de .galerie-container fonctionne, mais pas tout ce qui est en haut.
Merci
@media only screen and (max-width: 768px) {
.retournerContainer{display: none;}
#Nouvelles aside{display: none;}
.galerie-container{
grid-template-columns: 1fr;
padding: 1em;
grid-row-gap: 100px;
}
header{
background-color: black;
padding: 1rem;
}
nav{display: inline-block;}
nav li {display: block;}
header div a img {display: inline-block;}
#sec-nav{display: none;}
}
Ce site utilise des cookies pour améliorer uniquement votre expérience utilisateur.
Vous pouvez lire à tout moment comment nous utilisons les cookies sur le site.