Partage
  • Partager sur Facebook
  • Partager sur Twitter

Problème media queries

Sujet résolu
RobinPrgn
7 novembre 2017 à 21:27:38

Bonjour, j'ai besoin de votre aide pour régler mon problème au sujet des medias queries.

Je doit faire une version mobile pour mon site et cela ne fonctionne absolument pas !

Lorsque je bouge la taille de la fenêtre sur PC, ça fonctionne parfaitement par contre pas du tout sur mobile, help pls.

voici le css :

body{
	margin: 0;
	background-color: #ABB159;
}

img.goliath {
	height: 75%;
	width: 75%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

img.abeilles {
	height: 75%;
	width: 75%;
	display: block;
    margin-left: auto;
    margin-right: auto;

}

h1{
	margin : 0;
	font-family: Ravie, Century Gothic, Calibri;
	color: green;
	background-color: lightgreen;
	text-align: center;
	height: 20%;
	min-height:50px;
	border-bottom : solid green 5px;
}

p {
	text-align: center;
	font-size: 1em;
	font-family: Century Gothic, Calibri;
	font-style: normal;
	font-weight: normal;
}

.histoire1 {
	text-align: center;
	font-size: 1em;
	font-family: Century Gothic, Calibri;
	font-style: normal;
	font-weight: normal;
}

.histoire2 {
	border-top: solid green 5px;
	padding-top: 15px;
	text-align: center;
	font-size: 1em;
	font-family: Century Gothic, Calibri;
	font-style: normal;
	font-weight: normal;
}

img.cicindele{
	height: 75%;
	width: 75%;
	display: block;
    margin-left: auto;
    margin-right: auto;
}

h2 {
	text-align: center;
	text-decoration: underline;
}

h3{
	text-align: center;
}

li{
	display: inline-block;
	margin-right: 50px;
}

nav{
	width: 50%;
	height: 15%;
	min-height: 30px;
	background-color: #E1F5A9;
	margin-left:auto;
	margin-right:auto;
	border-bottom: solid green 5px;
	border-left:solid green 5px;
	border-right:solid green 5px;
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
}

ul{
	margin : 0;
	text-align: center;
}

.Insolite{
	display: inline-block;
	width: 25%;
	height: 100%;
	background-color: #088A29;
	vertical-align: top;

}

.Actualité{
	display: inline-block;
	width: 25%;
	height: 100%;
	background-color: #088A29;
	vertical-align: top;
}

section{
	display: inline-block;
	width: 50%;
	height: 100%;
	background-color:lightgreen;
}

.Contenu{
	margin-top: 20px;
	min-height:500px;
	border-top: solid green 5px;
	vertical-align: top;
}

.sources{
	margin-top: 40px;
	display : block;
}

@media only screen and (min-width: 250px) and (max-width: 720px){

	.Insolite{
		display: block;
		width: 80%;
		border: solid green 5px;
		margin-left: auto;
		margin-right: auto;
	}

	.Actualité{
		display: block;
		width: 80%;
		border: solid green 5px;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 40px;
	}

	section{
		display: block;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		margin-bottom: 20px;
		border: solid green 5px;
	}

	.Contenu{
		margin-top: 20px;
		min-height:500px;
		border-top: solid green 0px;
		vertical-align: top;
	}
}

Merci !

  • Partager sur Facebook
  • Partager sur Twitter
AbcAbc6
7 novembre 2017 à 22:30:35

Bonsoir, as tu bien la balise meta viewport?
  • Partager sur Facebook
  • Partager sur Twitter
iXtazia
  • HTML / CSS
8 novembre 2017 à 12:04:17

Bonjour,

Tout d'abord, Chrome comme Mozilla utilisent une fonctionnalité qui te permet de basculer ton site en version mobile.

- Sur Chrome :

Clic droit > Inspecter et clique sur cette icone en haut à droit : http://prntscr.com/h7q1tv

- Sur Mozilla :

Clic droit > Examiner l'élément et clique sur cette icone en bas à droit : http://prntscr.com/h7q210

Déjà ça te facilitera la vie au lieu d'agrandir ou du rétrécir ta fenêtre.

Ensuite comme te demande AbcAbc6, vérifie si tu as bien mis la balise <meta> entre tes balises <head>

-
Edité par iXtazia 8 novembre 2017 à 14:05:49

  • Partager sur Facebook
  • Partager sur Twitter
RobinPrgn
8 novembre 2017 à 12:33:31

Oui j'ai une balise meta : <meta charset="utf-8">
  • Partager sur Facebook
  • Partager sur Twitter
Huntez
  • HTML / CSS
8 novembre 2017 à 13:12:38

RobinPrgn a écrit:

Oui j'ai une balise meta : <meta charset="utf-8">


Bonjour, non on ne te parle pas de l'encodage du texte mais plutôt de la balise que va te permettre "d'adapter ton site" sur les versions mobile.

Je te met un petit lien pour mieux comprendre de quoi on parle : https://www.alsacreations.com/article/lire/1490-comprendre-le-viewport-dans-le-web-mobile.html

  • Partager sur Facebook
  • Partager sur Twitter
Soundboy39
8 novembre 2017 à 14:18:17

Bonjour,

Effectivement il faut inclure une balise meta "viewport" dans la head sinon çà peut ne pas fonctionner.

Quand tu dis que çà "fonctionne absolument pas" sur mobile... qu'est ce que tu veux dire ? Est-ce que le site s'affiche comme sur un écran standard (si il y a encore une notion d'écran standard) ou si le CSS n'est pas pris en charge ?

Vérifie aussi si les autres sites mobile fonctionnent pour être sur que cela ne vient pas de ton navigateur (au pire essaie ton site sur un autre navigateur voir un autre téléphone).

Sinon c'est la première fois que je vois l'attribut "only", ... normalement "min-width" et "max-width" suffisent pour cibler.
Peut tu essayer sans pour être sur que ce n'est pas çà qui perturbe le navigateur ?

  • Partager sur Facebook
  • Partager sur Twitter
RobinPrgn
8 novembre 2017 à 21:29:39

Merci infiniment à vous, j'ai trouvé la solution !

En effet, il me manquait ma balise meta viewport dans le html.

  • Partager sur Facebook
  • Partager sur Twitter
MoustaphaDiop58
24 octobre 2023 à 17:08:45 - Message modéré pour le motif suivant : Merci d’utiliser le bouton code pour insérer un code sur le forum


AbcAbc6
24 octobre 2023 à 17:13:45

@MoustaphaDiop58 Bonsoir, merci de ne pas squatter le sujet des autres, créer votre propre sujet dans le respect des règles du forum à savoir que le code doit être inséré sur le forum à l'aide de l'outil d'insertion de code soit le bouton code </> de la barre d'outil.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

  • soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"
  • soit de créer un nouveau sujet décrivant votre propre contexte
  • ne pas répondre à un déterrage et le signaler à la modération

Liens conseillés

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

  • Partager sur Facebook
  • Partager sur Twitter