[Résolu] @media () passe au-dessus de mon code principal - Aidez-moi SVP :( par Sandrapur - page 1

7 septembre 2021 à 16:30:36

Bonjour, en ce moment je suis entrain de me remettre dans le HTML/CSS et je rencontre quelques difficultés... surtout pour le responsive.
Je ne sais pas pourquoi, mais à partir du moment où je met le media query, c'est celui-ci qui prend le dessus sur mon code et s'affiche donc sur tous les écrans peu importe la taille...

Je n'arrive pas à savoir si c'est dû à une erreur dans le HTML ou le CSS... ça va faire deux jours que je suis dessus

Je vous met mon code HTML et CSS juste en dessous

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="assets/css/style.css">
	<link rel="icon" type="image/png" href="assets/img/favicon_logo.png" />
	<title>Bio Pop | Accueil</title>

	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
 
<script>

$(function(){
  $('#scrollUp').click(function() {
    $('html,body').animate({scrollTop: 0}, 'slow');
  });

  $(window).scroll(function(){
     if($(window).scrollTop()<200){
        $('#scrollUp').fadeOut();
     }else{
        $('#scrollUp').fadeIn();
     }
  });
});</script>
</script>

</head>
<body>
<header>
	<nav class="grid fontabril">
		<a href="index.html">
			<img src="assets/img/logo_sans_fond_Bio_Pop.png" alt="logo" title="logo" id="logo">
		</a>
		<a href="index.html">Accueil</a>
		<a href="produits.html">Nos Produits</a>
		<a href="contact.html" >Contact</a>
	</nav>
</header>

<section>
		<div>
			<img src="assets/img/vase_fleurs.png" alt="fleurs" title="fleurs" id="vase_fleurs">
		</div>
		<div id="vase_texte">
			<img src="assets/img/logo_nb.png" alt="logo" title="logo" id="logo_nb">
			<p>Votre compagnon au quotidien</p>
		</div>
	</div>
</section>

	<div id="scrollUp">
		<a href="#top"><img src="assets/img/arrow.png" id="scroll_top"></a>
	</div>

<section id="section2"></section>

<section id="section3">
	<h2>Nos engagements</h2>
	<div class="grid" id="picto">
		<article>
			<img src="assets/img/picto_bio_01.png" alt="100% BIO" alt="100% BIO">
			<h3>Des produits 100% BIO</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
		</article>
		<article>
			<img src="assets/img/picto_bio_02.png" alt="biofleurs" alt="biofleurs">
			<h3>Des produits à base de fleurs</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
		</article>
		<article>
			<img src="assets/img/picto_bio_03.png" alt="naturel" alt="naturel">
			<h3>Des produits totalement naturel</h3>
			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
		</article>
	</div>
</section>

<footer>
	<nav class="grid">
		<p>Bio Pop © 2021</p>
		<a href="mentions_legales.html">Mentions Légales</a>
		<a href="mentions_legales.html">CGV</a>
		<p>123 rue des Rues</p>
		<p>0123456789</p>
	</nav>
</footer>
	
</body>
</html>

@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Raleway:wght@100;400&display=swap');


*{
	margin:0;
	padding:0;
	box-sizing: border-box;
	border-collapse: collapse;
	font-family: Raleway, Arial, sans-serif;
}

html{scroll-behavior: smooth;}
.grid{
	max-width: 960px;
	margin: auto;
	display: grid;
}
header{width: 100%;}
header nav{
	grid-template-columns: 75% 20% 24% 20%;
	grid-template-rows: 30px;
	justify-content: center;
	align-items: center;
	padding: 15px;
	font-family: Abril Fatface;
}
footer nav{
	grid-template-columns: 30% repeat(4,1fr);;
	grid-template-rows: 50px;
	align-items: center;
}
footer nav a{ font-size:15.6px;}
header>nav>a{font-family: Abril Fatface;}
a{
	text-decoration:none; 
	color:black;
	font-size: 22px;
}
nav>a{
	font-size: 20px;
	color:black;
}
#logo{height: 40px;}
nav>a:hover{color:#EAD5E6;}
h3, h2{font-family:Abril Fatface;}
section{height:105VH;background-color: #AFE0CE;}

/*ACCUEIL*/
#vase_fleurs{
	height:1050px; 
	float: left;
	margin-top:90px;
}
#logo_nb{height:170px;margin-top:220px;}
#vase_texte{
	margin-left: 895px;
	padding-top: 250px;
}
#vase_texte>p{font-size:60px;}

#scrollUp {
    position: fixed;
    bottom: 15px;
    right: 45px;
    cursor: pointer;
    /*display: none;*/
}
#scroll_top {width: 45px;}

#section2{
	background: url(../../assets/img/mockup_produits_05.png);
	background-size: cover;
	background-color: #AFE0CE;
}
#section3{height: 55VH;background-color: #AFE0CE;}
h2{
	text-align: center;
	margin: 0;
	padding-top: 80px;
	font-size:50px;
}
article>img{height:150px;justify-content:center; display: block;}
article{text-align: justify;}
article>p{margin-right:50px;}
#picto{
    grid-template-columns:50% 50% 50%;
    grid-template-rows: 220%;
    align-items: center;
    margin-left:660px;
}


/*RESPONSIVE*/

@media (min-width: 992px){
	#vase_fleurs{height:620px; margin-top:50px;}
	#logo_nb{height:100px;margin-top:50px;}
	#vase_texte{margin-left: 895px;}
	#vase_texte>p{font-size:30px;}
	#section3{height: 65VH;}
	h2{padding-top: 40px;font-size:30px;}
       article>img{height:100px;}
       article>p{margin-right:50px;}
       #picto{
	    grid-template-columns:repeat(3, 1fr);
            grid-template-rows:170%;
            margin-left:320px;
        }
}

Lord Morpheus

7 septembre 2021 à 17:28:34

Bonjour,

Il vous manque quelque élément sur votre @media, à savoir sur quel écran voulez-vous que cela intervienne (je ne sais pas si en ne mettant rien, il prend une valeur par défaut)

Vous avez différente possibilité, mais pour cibler tout les écrans, voici ce que vous devriez avoir :

@media all and (min-width: 992px){
}

De plus, le css se lit et s'applique de haut en bas, je vous suggère donc de remonter tout en haut de votre CSS votre @media.

Lord Morpheus, Seigneur Morphée, Dieu Grecs des Songes, Fils de la Nuit et du Sommeil

Sandrapur

7 septembre 2021 à 18:20:40

Lord Morpheus a écrit:

Bonjour,

Il vous manque quelque élément sur votre @media, à savoir sur quel écran voulez-vous que cela intervienne (je ne sais pas si en ne mettant rien, il prend une valeur par défaut)

Vous avez différente possibilité, mais pour cibler tout les écrans, voici ce que vous devriez avoir :
@media all and (min-width: 992px){
}
De plus, le css se lit et s'applique de haut en bas, je vous suggère donc de remonter tout en haut de votre CSS votre @media.

Bonjour,

Merci pour votre aide et votre réponse !

-
Edité par Sandrapur 7 septembre 2021 à 18:31:52

EmmanuelBeziat

7 septembre 2021 à 19:48:33

Salut,

Pour clarifier : la directive "all" n'est absolument pas requise, et on mets bien les media queries après les déclarations non-spécifiques (justement parce que le css s'applique en cascade, de haut en bas).

En l'état, il n'y a aucun problème spécifique avec ton CSS, et il n'y a aucun souci quand je le teste, le css est bien appliqué et les instructions des media queries apparaissent quand les conditions sont remplies. Par contre, tu as une fermeture de div ligne 20 dans ton html qui ne correspond à rien.

Par contre, à la lecture de ton css, j'ai l'impression que tu inverses min-width et max-width. Tu donnes des tailles plus grandes dans la version par défaut, et plus petite sur les viewports au-delà de 992px et plus. Ne serait-ce pas plutôt l'inverse, que tu cherches à faire ?

-
Edité par EmmanuelBeziat 7 septembre 2021 à 19:49:23

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

Sandrapur

7 septembre 2021 à 22:14:09

EmmanuelBeziat a écrit:

Salut,

Pour clarifier : la directive "all" n'est absolument pas requise, et on mets bien les media queries après les déclarations non-spécifiques (justement parce que le css s'applique en cascade, de haut en bas).

En l'état, il n'y a aucun problème spécifique avec ton CSS, et il n'y a aucun souci quand je le teste, le css est bien appliqué et les instructions des media queries apparaissent quand les conditions sont remplies. Par contre, tu as une fermeture de div ligne 20 dans ton html qui ne correspond à rien.

Par contre, à la lecture de ton css, j'ai l'impression que tu inverses min-width et max-width. Tu donnes des tailles plus grandes dans la version par défaut, et plus petite sur les viewports au-delà de 992px et plus. Ne serait-ce pas plutôt l'inverse, que tu cherches à faire ?

-
Edité par EmmanuelBeziat il y a environ 1 heure

Bonsoir,

En effet le problème était le min-width à la place du max-width, tout marche maintenant !

Merci pour votre aide et les remarques !

@media () passe au-dessus de mon code principal

Aidez-moi SVP :(

Supprimer

Modérer

Signaler le message aux modérateurs