1429 sujets

Web Mobile et responsive web design

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 Smiley pleure

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

Ce ne serait pas plutôt @media (max-width: 992px), afin de caler sur les mobiles ? Puisque les valeurs à ce point son toutes plus basses que plus haut. On pourrait avoir un lien ?
Et abandonner les px pour le responsive, excepté pour des choses qui ne devront pas bouger (avec un VH qui arrive tout d'un coup) . Beaucoup d'autres détails, mais règle d'abord ce problème de @media.
Modifié par Bongota (07 Sep 2021 - 18:10)
Modérateur
Bonsoir,

il y a quelques valeurs surprenantes :

grid-template-columns: 75% 20% 24% 20%;

et
	margin-left: 895px;
	padding-top: 250px;

et
 grid-template-columns:50% 50% 50%;
    grid-template-rows: 220%;

....

On a l'impression que tu essai de patcher un layout en float(sans maitrise du contexte de formatage) en un layout en grid (à l'aveugle) avec des valeurs qui voudrait être plus large que son conteneur !? (fr pour fraction est peut-etre une meilleur base que % dans un grid layout).

Quel est le résultat escompté au dessus et en dessous de 992px en fait ? A moins que ton code soit incomplet.

Cdt
Bongota a écrit :
Bonjour,

Ce ne serait pas plutôt @media (max-width: 992px), afin de caler sur les mobiles ? Puisque les valeurs à ce point son toutes plus basses que plus haut. On pourrait avoir un lien ?
Et abandonner les px pour le responsive, excepté pour des choses qui ne devront pas bouger (avec un VH qui arrive tout d'un coup) . Beaucoup d'autres détails, mais règle d'abord ce problème de @media.


Bonsoir,

Si en effet, avec un max-width cela marche, on m'a aidé et j'ai réussi à résoudre mon problème tout à l'heure.
Je n'ai pas de lien, après plus d'un an sans faire de HTML/CSS j'essaie de me remettre difficilement dans le bain et ce site est juste un entraînement. Si vous avez d'autres conseils, n'hésitez pas je suis preneuse !
Merci pour l'aide et les conseils !
gcyrillus a écrit :
Bonsoir,

il y a quelques valeurs surprenantes :

grid-template-columns: 75% 20% 24% 20%;

et
	margin-left: 895px;
	padding-top: 250px;

et
 grid-template-columns:50% 50% 50%;
    grid-template-rows: 220%;

....

On a l'impression que tu essai de patcher un layout en float(sans maitrise du contexte de formatage) en un layout en grid (à l'aveugle) avec des valeurs qui voudrait être plus large que son conteneur !? (fr pour fraction est peut-etre une meilleur base que % dans un grid layout).

Quel est le résultat escompté au dessus et en dessous de 992px en fait ? A moins que ton code soit incomplet.

Cdt


Bonsoir,

Après plus d'un an sans faire de HTML/CSS j'essaie de me remettre difficilement dans le bain et ce site est juste un entraînement, j'essaie de m'en sortir avec mes quelques souvenirs et internet donc ce premier entraînement ressemble sûrement à du bricolage ^^' et mon code est encore incomplet en effet.

Merci pour le conseil, si vous en avez d'autres n'hésitez pas.
Le plus tôt possible, prendre un hébergement gratuit. Tu seras mieux aidé ici avec un lien vers un site, même sommaire, qu'avec du code seul.
Reprendre un développement simple, un menu en haut dans un bandeau, un espace principal (main) et un footer. En grid ou pas, il y a tant d'exemples sur le net qu'il est impossible de tous les lister. Une séparation nette pour les mobiles avec les @media, pas de Javascript dans un premier temps. Des valeurs de block, marges et menu en em, rem, % ou vw, très peu de px pour le responsive.
Utiliser la fonction du navigateur pour les gabarits d'écrans différents et construire le site au fur et à mesure, pas tout d'un seul coup. Comprendre à chaque étape ce qui se passe et corriger un problème avant d'aller plus loin. Ne pas avancer sur des choses que l'on ne maîtrise pas au minimum, ou alors faire du WP.
Rester sur ce forum où des personnes t'aideront, à condition de présenter au moins quelque chose de construit, même sommaire.
Bonne continuation.
Bongota a écrit :
Le plus tôt possible, prendre un hébergement gratuit.

Et aussi inscrivez-vous sur CodePen et faites des petits morceaux de code isolés, pour vous faire la main. Perso je m'en sers pour créer tous mes prototypes, même après plus de 12 ans de front. Et on peut y voir le travail des autres, comme sur un github, mais en live.

PS : bon anniversaire Bongota Smiley party
Modifié par Olivier C (08 Sep 2021 - 06:56)
Bongota a écrit :
Le plus tôt possible, prendre un hébergement gratuit. Tu seras mieux aidé ici avec un lien vers un site, même sommaire, qu'avec du code seul.
Reprendre un développement simple, un menu en haut dans un bandeau, un espace principal (main) et un footer. En grid ou pas, il y a tant d'exemples sur le net qu'il est impossible de tous les lister. Une séparation nette pour les mobiles avec les @media, pas de Javascript dans un premier temps. Des valeurs de block, marges et menu en em, rem, % ou vw, très peu de px pour le responsive.
Utiliser la fonction du navigateur pour les gabarits d'écrans différents et construire le site au fur et à mesure, pas tout d'un seul coup. Comprendre à chaque étape ce qui se passe et corriger un problème avant d'aller plus loin. Ne pas avancer sur des choses que l'on ne maîtrise pas au minimum, ou alors faire du WP.
Rester sur ce forum où des personnes t'aideront, à condition de présenter au moins quelque chose de construit, même sommaire.
Bonne continuation.


Merci beaucoup pour tous vos conseils !! Smiley biggrin

Bonne fin de journée !

(et bon anniversaire !)
Modifié par purpur (08 Sep 2021 - 16:45)
Olivier C a écrit :

Et aussi inscrivez-vous sur CodePen et faites des petits morceaux de code isolés, pour vous faire la main. Perso je m'en sers pour créer tous mes prototypes, même après plus de 12 ans de front. Et on peut y voir le travail des autres, comme sur un github, mais en live.

PS : bon anniversaire Bongota Smiley party



Je suis déjà inscrite, mais je ne me suis pas connecté depuis très longtemps... c'est un super site en plus. Merci du conseil, bonne fin de journée !