Partage

Media queries (incompréhension sur les codes )

difficulté sur les médias queries (codes et émulateurs)

L.O.D.A

17 juillet 2019 à 14:44:07

Bonjour, j'essaye de mettre en responsive mon site et je rencontre des problèmes..

Le responsive n'est pas pareil selon deux émulateurs:

-celui déjà installé sur google chrome en allant sur "inspecter"

-celui de mobile browser emulator (https://chrome.google.com/webstore/detail/mobile-browser-emulator/lbofcampnkjmiomohpbaihdcbjhbfepf?hl=fr).

Les medias queries s'affichent correctement sur mobile browser emulator alors que celui de google chrome rencontre des problèmes ( la grande majorité des codes ne sont pas pris en compte). Comme par exemple le paragraphe qui ne change pas de couleur pour l’emulateur de chrome o_O :colere:

Je voudrais aussi des conseils sur les orientations "landscape et portrait" pour les téléphones et tablettes. Mais aussi des "conseils pratiques générales" sur les médias queries. :soleil:

Je vous mets le code des médias queries (SITUE SUR UN FICHIER CSS) d'une de mes pages (j'aime les poissons ! :honte: ):

MERCI SI VOUS REPONDEZ !

.fishphoto{
	position: absolute;
	left: 0px;
	top: 360px;
	width: 100px;
	height: 100px;
}

.fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 1em;
	position: absolute;
	top: 150px;
	left: 0px;
	width: 320px;
	}

.LienWikiglouglouPeche{
	color: blue;
}
.LienWikiglouglouPeche:hover{
	background-image: url(https://media0.giphy.com/media/l4Jz19hgVBnCCM8uY/giphy.gif?cid=790b76115d0f44ca62527a7759302861&rid=giphy.gif);
	color: white;
}



.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: inline-block;
list-style-type: none;
text-decoration: none;
flex-wrap: nowrap;
z-index: -1;
}



 

.bateau{
	width: 500px;
	height: 150px;
	position: absolute;
	left: 580px;
	top: 0px;
	z-index: 999999;
	}

	.poissonbleutristegif{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 595px;
		top:295px;
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 942px;
		top: 480px;
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 770px;
		top: 410px;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 933px;
		top: 232px;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 855px;
		top: 235px;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 655px;
		top: 510px;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 925px;
		top: 320px;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 680px;
	top: 230px;
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 790px;
	top: 580px;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 770px;
		top: 325px;

}
body{
	background-image: url("../img/Peche.jpg");
	background-repeat: no-repeat;
	

}

p{
	color: red;
}

/*MEDIA QUERIES!!!! */

/*En dessous, on codera pour les écrans inférieurs à un pc (PARTIE QUI BUG !!!!!!) */
@media all and (max-width: 1024px) 
{
	.bateau{
	width: 450px;
	height: 150px;
	position: absolute;
	left: 340px;
	top: 0px;
	}

p{
	color: red;
	background-color: yellow;
}

body{
	background-image: url("../img/PECHEbug.png");
	background-repeat: no-repeat; 
	  }
	
.poissonbleutristegif{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 382px;
		top:300px;
		
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 370px;
		display: none;
		
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 670px;
		top: 310px;
		display: none;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 613px;
		top: 220px;
		display: none;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 740px;
		top: 175px;
		display: none;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 565px;
		top: 380px;
		display: none;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 300px;
			display: none;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 590px;
	top: 170px;
		display: none;
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 680px;
	top: 450px;
	display: none;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 660px;
		top: 240px;
		display: none;
}


}




/*En dessous, on codera pour les écrans inférieurs à un pc (grande tablette) */
@media all and (max-width: 979px) 
{

	.fishphoto{ /*la jolie photo de notre beau poisson*/
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0px;
	top: 290px;
	
	  }
	  .fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 0.85em;
	position: absolute;
	top: 130px;
	left: 0px;
	width: 320px;
	}
	body{
	background-image: url("../img/PECHEgrandetablette.png");
	background-repeat: no-repeat;
	background-size: 1079px;


}
p{
	color: red;
	background-color: green;
}
.poissonbleutristegif{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 412px;
		top:260px;
		
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 370px;
		display: none;
		
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 670px;
		top: 310px;
		display: none;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 613px;
		top: 220px;
		display: none;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 740px;
		top: 175px;
		display: none;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 565px;
		top: 380px;
		display: none;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 300px;
			display: none;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 590px;
	top: 170px;
		display: none;
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 680px;
	top: 450px;
	display: none;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 660px;
		top: 240px;
		display: none;

}

.bateau{
	width: 450px;
	height: 150px;
	position: absolute;
	left: 340px;
	top: 0px;
	z-index: -1
	}

	
.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: inline-block;
list-style-type: none;
text-decoration: none;
z-index: 9999999;
flex-wrap: nowrap;
}

  }

/*En dessous, on codera pour les écrans inférieurs à un pc (petite tablette) */
@media all and (max-width: 767px) 
{
	.fishphoto{ /*la jolie photo de notre beau poisson*/
	width: 50px;
	height: 50px;
	left: 0px;
	position: absolute;
	left: 0px;
	top: 350px;
	
	  }
	  .fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 0.75em;
	background-color: red;
	position: absolute;
	top: 130px;
	left: 0px;
	width: 200px;
	}
	body{
	background-image: url("../img/PECHEpetitetablette.png");
	background-repeat: no-repeat;
	background-size: 820px;

}



.poissonbleutristegif{
		width: 40px;
		height: 40px;
		position: absolute;
		left: 302px;
		top:310px;
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 370px;
		display: none;
		
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 670px;
		top: 310px;
		display: none;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 590px;
		top: 220px;
		display: none;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 740px;
		top: 175px;
		display: none;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 565px;
		top: 370px;
		display: none;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 300px;
			display: none;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 590px;
	top: 170px;
	display: none;
	
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 740px;
	top: 370px;
	display: none;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 660px;
		top: 240px;
		display: none;

}

.bateau{
	width: 400px;
	height: 150px;
	position: absolute;
left: 220px;
	top: 0px;
	z-index: -1;
	}

	
.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: inline-block;
list-style-type: none;
text-decoration: none;
flex-wrap: nowrap;
z-index: 999999999;

}
}


	/*En dessous, on codera pour les écrans inférieurs à un pc (téléphone) */
@media all and (max-width: 480px) 
{
	.fishphoto{ /*la jolie photo de notre beau poisson*/
	width: 50px;
	height: 50px;
	left: 0px;
	position: absolute;
	left: 0px;
	top: 400px;
	
	  }
	  .fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 0.7em;
	background-color: orange;
	position: absolute;
	top: 150px;
	left: 0px;
	width: 120px;
	}

	


	body{
	background-image: url("../img/PECHEtel.jpg");
	background-repeat: no-repeat;
	background-size: 1420px;


}

.poissonbleutristegif{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 157px;
		top:270px;
		
	
	}

.poisonbleutristepng{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 245px;
		top: 430px;
		display: flex;
		
	}
	.poisonbleutristeréfléchit{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 197px;
		top:370px;
		display: flex;
		
	}
	.poissonjaunetriste{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 247px;
		top: 210px;
		display: flex;
	}
	.poissonorangeviolettriste{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 220px;
	top: 210px;
		display: flex;
	}

	.Poissonrougeenormelarmes{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 178px;
		top: 440px;
		display: flex;
	}

	.Dessinpoissonbleutriste{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 245px;
		top: 368px;
			display: flex;
	}
.PoissonSerpent{
	width: 20px;
	height: 20px;
	position: absolute;
left: 177px;
		top:210px;
		display: flex;
}

.PoissonClown{
	width: 20px;
	height: 20px;
	position: absolute;
	left: 207px;
		top:540px;
	display: flex;
}

.Poissonjaunerealiste{
	width: 20px;
		height: 20px;
		position: absolute;
		left: 197px;
		top:276px;
		display: flex;
		

}

.bateau{
	width: 290px;
	height: 145px;
	position: absolute;
	left: 70px;
	top: 0px;
	z-index: -1;
	}

	
.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: block;
list-style-type: none;
text-decoration: none;
flex-wrap: nowrap;
z-index: 99999;
}

}

@media all and (max-width: 320px)  
{
	body{
		background-color: green;
	}
}

-
Edité par L.O.D.A 17 juillet 2019 à 15:01:20

LéonDupré1

18 juillet 2019 à 12:29:36

Bjr, moi aussi je rencontre le même problème avec les émulateurs. Mais j’en sais pas plus que vous ^^...

AliasDmc

18 juillet 2019 à 19:17:29

Bonjour Lunet😎 ,

Est-il possible d'avoir le code HTML , CSS pour tester

Découvrez les Css avec la zonecss.fr

L.O.D.A

18 juillet 2019 à 19:31:11

Bonjour AliasDmc, ça marche je l'envoie, merci de m'avoir répondu ! Je vous envoie également l'adresse de mon site (visible que sur pc) : https://lemondedefish.netlify.com/

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/pecheSTYLES.css">
<link rel="icon" type="img/favicon-icon" href="img/favicon.ico">
	<title>Pêche</title>
</head>
<body>		

<p> <img class="poissonbleutristegif" src="https://media.giphy.com/media/5xaOcLsc4y0lxicC8s8/giphy.gif"></p>

<a class="Oceanacceuil" href="lienmondefish.html">
	Océan d'accueil
</a>	


<p class="fishquiparle"> Nous voici au lieu de l'océan le plus dangereux pour un poisson, la zone de pêche... <strong>*BLOUP!*</strong> Malheureusement les humains doivent se nourrir comme tout être vivant, mais il y a quand même des limites... <a class="LienWikiglouglouPeche"  href="Wikiglougloupeche.html"> Clique ici pour en savoir plus sur ce sujet grâce à mon ami poisson scientifique !</a></p>

<img class="fishphoto" src="img/fishtriste.png">


<p> <img class="bateau"   src="https://cdn.pixabay.com/photo/2017/01/30/14/11/cutter-2020911_960_720.png"></p>
<p><img class="poisonbleutristepng" src="https://cdn.pixabay.com/photo/2016/04/27/07/00/goldfish-1356076_960_720.png"></p>
<p><img class="poisonbleutristeréfléchit" src="https://cdn.pixabay.com/photo/2016/06/11/20/27/fish-1450768_960_720.png"></p>
<p><img class="poissonjaunetriste"   src="https://cdn.pixabay.com/photo/2013/07/13/13/26/fish-161031_960_720.png"></p>
<p> <img class="poissonorangeviolettriste" src="img/poissonorangeviolettriste.png"></p>

<p><img class="Poissonrougeenormelarmes" src="http://www.fourjay.org/myphoto/f/125/1256912_sad-fish-png.png"> </p>

<p><img class="Dessinpoissonbleutriste" src="https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/9f771439-30b3-46e7-8752-00cb97257753/d8qm9af-bf92e68b-9622-4169-a6f8-cca9ea91f31f.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzlmNzcxNDM5LTMwYjMtNDZlNy04NzUyLTAwY2I5NzI1Nzc1M1wvZDhxbTlhZi1iZjkyZTY4Yi05NjIyLTQxNjktYTZmOC1jY2E5ZWE5MWYzMWYucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.CaTZVNnPvyKUHJzXHfEG4x9WErd7Q0zBb-XU7iuLaXY"></p>

<p><img class="PoissonSerpent" src="img/PoissonSerpent.png"></p>
<p><img class="PoissonClown" src="img/PoissonClown.png"></p>
<p><img class="Poissonjaunerealiste"  src="img/Poissonjaunerealiste.png"></p>


</body>
</html>

-
Edité par L.O.D.A 20 juillet 2019 à 10:34:29

AliasDmc

19 juillet 2019 à 19:17:09

Bonjour Lunet😎 ,

Pour moi c'est ton "browser emulator" qui est pas bon, si je ne me trompe dans mon raisonnement.

En prenant une taille de 375 de large et 667 de haut

Largeur totale calculée du body devrait être de 375

Si je regarde ton si avec l’émulateur de développement intégré à chrome, j'ai 8px des deux cotés plus une width de 359

soit 359 + 8 + 8 = 375

Si je regarde ton site avec l’émulateur "mobile browser emulato", j'ai 8px des deux cotés plus une width de 342

soit 342 + 8 + 8 = 358 en fait il manque 17px qui sont pris par la barre de scroll

Donc le rendu (affichage) n'est pas bon

Découvrez les Css avec la zonecss.fr

L.O.D.A

19 juillet 2019 à 19:28:04

Bonsoir AliasDmc, merci beaucoup de t’intéresser à mon sujet et pour ta réponse.

Mais du coup pourquoi certains codes de medias queries ne sont pas pris en compte avec l’emulateur de chrome ( pas de changements de couleur des paragraphes, etc..). C’est la même chose depuis ton appareil ? :euh:

Et sans vouloir abuser, à tu des conseils à me donner pour organiser les orientations (landscape, portrait ).

Merci encore en tout cas

-
Edité par L.O.D.A 19 juillet 2019 à 19:29:18

AliasDmc

19 juillet 2019 à 20:30:34

Bonjour Lunet😎 ,

Non je ne vois pas le changement de couleur.

Mais si tu mets un "and" avant tes blocs (orientation: *****) cela devrait mieux se passer d'après mes tests (tu peux essayer)

@media all and (max-width: 767px) and (orientation: landscape)

au lieu de

@media all and (max-width: 767px) (orientation: landscape)

-
Edité par AliasDmc 19 juillet 2019 à 20:30:59

Découvrez les Css avec la zonecss.fr

L.O.D.A

20 juillet 2019 à 9:58:31

Rebonjour AliasDmc, j'ai fais ce que tu m'as dit. Ça fonctionne quand on réduit la fenêtre du navigateur chrome mais pas trop avec ses émulateurs (disponibles en clique droit--->inspecter---> symbole téléphone et tablette), en effet le background rouge (disponible entre 767 px et 480 px en terme de width) ,le background orange (entre 480 et 320) et le background vert (inférieur à 320 px) ne sont pas pris en compte par ces émulateurs. o_O

(C'est normal l'orientation °portrait° pour les téléphones, je veux commencer par ceci pour ce type d'appareil )

Est-ce une erreur de code ? Merci en tout cas pour ta grande aide

Je te remet mon code css/mediasqueries qui à jour:

(Pour indiquation, la page se trouve sur *PÊCHE* sur mon site : https://lemondedefish.netlify.com/index.html)

.fishphoto{
	position: absolute;v
	left: 0px;
	top: 360px;
	width: 100px;
	height: 100px;
}

.fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 1em;
	position: absolute;
	top: 150px;
	left: 0px;
	width: 320px;
	}

.LienWikiglouglouPeche{
	color: blue;
}
.LienWikiglouglouPeche:hover{
	background-image: url(https://media0.giphy.com/media/l4Jz19hgVBnCCM8uY/giphy.gif?cid=790b76115d0f44ca62527a7759302861&rid=giphy.gif);
	color: white;
}



.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: inline-block;
list-style-type: none;
text-decoration: none;
flex-wrap: nowrap;
z-index: -1;
}



 

.bateau{
	width: 500px;
	height: 150px;
	position: absolute;
	left: 580px;
	top: 0px;
	z-index: 999999;
	}

	.poissonbleutristegif{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 595px;
		top:295px;
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 942px;
		top: 480px;
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 770px;
		top: 410px;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 933px;
		top: 232px;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 855px;
		top: 235px;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 655px;
		top: 510px;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 925px;
		top: 320px;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 680px;
	top: 230px;
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 790px;
	top: 580px;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 770px;
		top: 325px;

}
body{
	background-image: url("../img/Peche.jpg");
	background-repeat: no-repeat;
	

}

p{
	color: red;
}

/*MEDIA QUERIES!!!! */

/*En dessous, on codera pour les écrans inférieurs à un pc (PARTIE QUI BUG !!!!!!) */
@media all and (max-width: 1024px) and (orientation: landscape)
{
	.bateau{
	width: 450px;
	height: 150px;
	position: absolute;
	left: 340px;
	top: 0px;
	}

p{
	color: red;
	background-color: yellow;
}

body{
	background-image: url("../img/PECHEbug.png");
	background-repeat: no-repeat; 
	  }
	
.poissonbleutristegif{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 382px;
		top:300px;
		
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 370px;
		display: none;
		
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 670px;
		top: 310px;
		display: none;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 613px;
		top: 220px;
		display: none;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 740px;
		top: 175px;
		display: none;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 565px;
		top: 380px;
		display: none;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 300px;
			display: none;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 590px;
	top: 170px;
		display: none;
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 680px;
	top: 450px;
	display: none;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 660px;
		top: 240px;
		display: none;
}


}




/*En dessous, on codera pour les écrans inférieurs à un pc (grande tablette) */
@media all and (max-width: 979px) and (orientation: landscape)
{

	.fishphoto{ /*la jolie photo de notre beau poisson*/
	width: 50px;
	height: 50px;
	position: absolute;
	left: 0px;
	top: 290px;
	
	  }
	  .fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 0.85em;
	position: absolute;
	top: 130px;
	left: 0px;
	width: 320px;
	}
	body{
	background-image: url("../img/PECHEgrandetablette.png");
	background-repeat: no-repeat;
	background-size: 1079px;


}
p{
	color: red;
	background-color: green;
}
.poissonbleutristegif{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 412px;
		top:260px;
		
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 370px;
		display: none;
		
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 670px;
		top: 310px;
		display: none;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 613px;
		top: 220px;
		display: none;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 740px;
		top: 175px;
		display: none;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 565px;
		top: 380px;
		display: none;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 300px;
			display: none;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 590px;
	top: 170px;
		display: none;
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 680px;
	top: 450px;
	display: none;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 660px;
		top: 240px;
		display: none;

}

.bateau{
	width: 450px;
	height: 150px;
	position: absolute;
	left: 340px;
	top: 0px;
	z-index: -1
	}

	
.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: inline-block;
list-style-type: none;
text-decoration: none;
z-index: 9999999;
flex-wrap: nowrap;
}

  }

/*En dessous, on codera pour les écrans inférieurs à un pc (petite tablette) */
@media all and (max-width: 767px) and (orientation: landscape)
{
	.fishphoto{ /*la jolie photo de notre beau poisson*/
	width: 50px;
	height: 50px;
	left: 0px;
	position: absolute;
	left: 0px;
	top: 350px;
	
	  }
	  .fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 0.75em;
	background-color: red;
	position: absolute;
	top: 130px;
	left: 0px;
	width: 200px;
	}
	body{
	background-image: url("../img/PECHEpetitetablette.png");
	background-repeat: no-repeat;
	background-size: 820px;

}



.poissonbleutristegif{
		width: 40px;
		height: 40px;
		position: absolute;
		left: 302px;
		top:310px;
	
	}
	.poisonbleutristepng{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 370px;
		display: none;
		
	}
	.poisonbleutristeréfléchit{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 670px;
		top: 310px;
		display: none;
	}
	.poissonjaunetriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 590px;
		top: 220px;
		display: none;
	}
	.poissonorangeviolettriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 740px;
		top: 175px;
		display: none;
	}

	.Poissonrougeenormelarmes{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 565px;
		top: 370px;
		display: none;
	}

	.Dessinpoissonbleutriste{
		width: 50px;
		height: 50px;
		position: absolute;
		left: 815px;
		top: 300px;
			display: none;
	}
.PoissonSerpent{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 590px;
	top: 170px;
	display: none;
	
}

.PoissonClown{
	width: 50px;
	height: 50px;
	position: absolute;
	left: 740px;
	top: 370px;
	display: none;
}

.Poissonjaunerealiste{
	width: 50px;
		height: 50px;
		position: absolute;
		left: 660px;
		top: 240px;
		display: none;

}

.bateau{
	width: 400px;
	height: 150px;
	position: absolute;
left: 220px;
	top: 0px;
	z-index: -1;
	}

	
.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: inline-block;
list-style-type: none;
text-decoration: none;
flex-wrap: nowrap;
z-index: 999999999;

}
}


	/*En dessous, on codera pour les écrans inférieurs à un pc (téléphone) */
@media all and (max-width: 480px) and (orientation: portrait)
{
	.fishphoto{ /*la jolie photo de notre beau poisson*/
	width: 50px;
	height: 50px;
	left: 0px;
	position: absolute;
	left: 0px;
	top: 400px;
	
	  }
	  .fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 0.7em;
	background-color: orange;
	position: absolute;
	top: 150px;
	left: 0px;
	width: 120px;
	}

	


	body{
	background-image: url("../img/PECHEtel.jpg");
	background-repeat: no-repeat;
	background-size: 1420px;


}

.poissonbleutristegif{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 157px;
		top:270px;
		
	
	}

.poisonbleutristepng{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 245px;
		top: 430px;
		display: flex;
		
	}
	.poisonbleutristeréfléchit{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 197px;
		top:370px;
		display: flex;
		
	}
	.poissonjaunetriste{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 247px;
		top: 210px;
		display: flex;
	}
	.poissonorangeviolettriste{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 220px;
	top: 210px;
		display: flex;
	}

	.Poissonrougeenormelarmes{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 178px;
		top: 440px;
		display: flex;
	}

	.Dessinpoissonbleutriste{
		width: 20px;
		height: 20px;
		position: absolute;
		left: 245px;
		top: 368px;
			display: flex;
	}
.PoissonSerpent{
	width: 20px;
	height: 20px;
	position: absolute;
left: 177px;
		top:210px;
		display: flex;
}

.PoissonClown{
	width: 20px;
	height: 20px;
	position: absolute;
	left: 207px;
		top:540px;
	display: flex;
}

.Poissonjaunerealiste{
	width: 20px;
		height: 20px;
		position: absolute;
		left: 197px;
		top:276px;
		display: flex;
		

}

.bateau{
	width: 290px;
	height: 145px;
	position: absolute;
	left: 70px;
	top: 0px;
	z-index: -1;
	}

	
.Oceanacceuil{
		position: absolute;
	top: 0px;
	right: 0px;
	background-image: url(https://media.giphy.com/media/uxbIr5yajuWti/giphy.gif);
	color: white;
	display: block;
list-style-type: none;
text-decoration: none;
flex-wrap: nowrap;
z-index: 99999;
}

}

@media all and (max-width: 320px) and (orientation: portrait)
{
	body{
	background-image: url("../img/PECHEtel.jpg");
	background-repeat: no-repeat;
	background-size: 1420px;

}
 .fishquiparle{
	font-family: Comic Sans MS;
    color: #B40404;
	font-weight: bold;
	font-size: 0.7em;
	background-color: green;
	position: absolute;
	top: 150px;
	left: 0px;
	width: 120px;
	}
}

-
Edité par L.O.D.A 20 juillet 2019 à 10:35:57

AliasDmc

20 juillet 2019 à 10:41:27

Bonjour Lunet😎 ,

Il est possible de faire un codepen de ton code

Cela me faciliterai les choses, ou mettre à jour ton site https://lemondedefish.netlify.com/

Découvrez les Css avec la zonecss.fr

L.O.D.A

20 juillet 2019 à 11:12:19

Bonjour, merci de ta réponse. Mais pourquoi un "codepen" de te faciliterai les choses ? (Je connais pas ce site :euh: ).

En plus je crois que le background et certains images ne seront pas visible car il sont enregistrés dans un dossier img.

Je t'envoie le lien de ce que j'ai pu faire: https://codepen.io/lunet77/

-
Edité par L.O.D.A 20 juillet 2019 à 11:23:23

AliasDmc

20 juillet 2019 à 13:39:43

Bonjour Lunet😎 ,

Il faut ajouter une balise meta viewport

Voici le codepen did moi si cela fonctionne mieux :

https://codepen.io/Zonecss/pen/rXVegb

Pour ouvrir le codepen sans l’éditeur :

- Cliquer sur change view -> debug mode

Pour voir la meta :

- Cliquer setting -> onglet html

Découvrez les Css avec la zonecss.fr

L.O.D.A

20 juillet 2019 à 15:04:44

Bonjour, je crois que c'est bon d'après mes tests ! Donc il suffit de mettre la balise meta viewport (<meta name="viewport" content="width=device-width, initial-scale=1">) entre les "balises head" du code html concerné ?

En tout cas je te remercie de ta grande patience, tu es super !

-
Edité par L.O.D.A 20 juillet 2019 à 15:05:17