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
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;
}
}
