Partage

Probleme avec le Respansive de mon site sur mobile

Prebleme avec le respansive sur portable

30 décembre 2017 à 12:58:31

Bonjour ! Voila j'ai creer un menu repansive pour que a partir de 768px, ma nav du Header se cache et que mon mene reponsive apparait avec le bouton ! Le soucis c'est que quand je diminue la fenetre de mon navigateur a 768px tout marche correctement, mais quand j'ai essayer sur mon Portable, rien se passe comme prevue le 2 menu apparait et mon menu reponsive est visible, je n'est pas trouvé la solution au probleme, qurlqu'un pourrait m'aider ? Merci d'avance! (Lien: https://zarrox.000webhostapp.com/ExtensionTwitch/index.html)

-
Edité par NicolasRaulin1 30 décembre 2017 à 13:02:07

30 décembre 2017 à 13:47:09

Salut, je peux essayé de t'aider mais je suis pas expert... LOL

Peux tu envoyer un copie de ton code CSS et le html pleas ?

30 décembre 2017 à 13:54:34

BoToine-1996 a écrit:

Salut, je peux essayé de t'aider mais je suis pas expert... LOL

Peux tu envoyer un copie de ton code CSS et le html pleas ?

Salut, pas de soucis moi aussi jesuis pas un expert encore^^,bah la je peut pas, en plus j'ai beaucoup de fichier, mais va sur le site est fait inspecter comme sur le Srenn tu verra tout le code ? :)

Staff 30 décembre 2017 à 13:55:34

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 13:58:58

Je m'incline tu es entre de bonne mains MDR ^^

-
Edité par BoToine-1996 30 décembre 2017 à 14:00:07

30 décembre 2017 à 14:10:36

Lamecarlate a écrit:

Bonjour,

je pense qu'il manque essentiellement la meta "viewport", voir ici : https://openclassrooms.com/courses/apprenez-a-creer-votre-site-web-avec-html5-et-css3/mise-en-page-adaptative-avec-les-media-queries#/id/r-1612619

Pense aussi à corriger les petites erreurs de validation restantes : https://validator.w3.org/nu/?doc=https%3A%2F%2Fzarrox.000webhostapp.com%2FExtensionTwitch%2Findex.html


Bonjour ! Effectivement j'avais oublier la meta viewport, mais je vien de la rajouter est rien a changé, je pense que le soucis vien d'autre part, le despansive meme fermé se montre touours sur mobile ? Merci d'avoir essayer de m'aider quand meme !
Staff 30 décembre 2017 à 14:26:28

Euh, la valeur de viewport vers où le lien menait était "width=device-width". Il vaut mieux ne pas forcer une largeur comme 800.

Tu peux faire la correction sur ton site pour qu'on voie ça ?

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 14:32:05

Lamecarlate a écrit:

Euh, la valeur de viewport vers où le lien menait était "width=device-width". Il vaut mieux ne pas forcer une largeur comme 800.

Tu peux faire la correction sur ton site pour qu'on voie ça ?

Oui, je l'avais fait en premier mais rien avait changé. Oui je vient de le remettre, mais aucune difference ?

Staff 30 décembre 2017 à 14:38:28

> Oui je vient de le remettre, mais aucune difference ?

Bah pas pour moi :D Je viens de charger ton site dans Firefox (Fennec) sur mon téléphone Android, et j'ai désormais bien le menu fermé par défaut, qui s'ouvre quand je clique sur le burger. (par contre, les gros blocs noirs et blancs au-dessus, c'est voulu ?)

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 14:57:54

Je les bien changé regarde ? 

Ah bon ? bah moi sa fait rien ? et le gros blocs noire non je pense pas :oTu peut me montré un screen de ton coter ? Tes sur qu'elle navigateur sur le tel ? 

Staff 30 décembre 2017 à 15:11:28

Mon navigateur est Firefox pour Android.

Voici un screenshot de ce que je vois avec le menu fermé :

Et voilà en menu ouvert :

Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 15:16:19

Ok.

-
Edité par Saint Fleur Jean 30 décembre 2017 à 15:30:13

Staff 30 décembre 2017 à 15:23:17

SainFleurJean > non. Pas sur ce sujet. Ne squatte pas les sujets des autres, crée-en un dédié à ton problème.
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 15:28:57

 Moi j'ai chrome tu pense que sa peut etre a cause de sa? On est bien d'accord que je doit rajouter juste <meta name="viewport" content="width=800"/> c'est bien se que tu a fait? 

Parce que regarde se que j'ai en menu ouvert et fermé ? Je comprend vraiment rien pour le coup :euh:

-
Edité par NicolasRaulin1 30 décembre 2017 à 15:34:23

Staff 30 décembre 2017 à 15:31:01

Non, il faut bien mettre la version "width=device-width" et pas "width=800" (sinon tu dis que ton viewport fait 800px de large, qui est supérieur à 768px, donc ta media query ne se déclenche jamais.
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 15:41:17

Euh oui width=device-width excuse moi j'ai copier le mauvais sur le post--' mais je les mis mais sa ne change rien :/ 
Staff 30 décembre 2017 à 15:51:41

Ah, en effet, avec Chrome, on n'a pas le même résultat… Ajoute ";initial-scale=1.0" sans les guillemets mais avec le point-virgule après le "device-width" ?
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 16:11:20

Ah effectivement j'ai le meme resultat que toi ! Merci pour ton aide l'amis ! :) Maintenant reste pu a dire au text de venir nous revoir :lol: Merci de m'avoir donner un petit coup de mains !
Staff 30 décembre 2017 à 17:10:13

Ah ben oui mais si sur Chrome ça n'a pas le bon rendu, ça ne va pas…
Pas d'aide concernant le code par MP ni par mail, le forum est là pour ça :) Postez votre code html et css (bouton '</>') !!
30 décembre 2017 à 17:22:23

genre sa ce mais bien le soucis ces que on peut decaller sur la droite ducoup on voit le menu cacher ? ... :oi effectivement... j'ai modifier quelque element, mais pourquoi sa marche pas sur chrome ?:euh:

-
Edité par NicolasRaulin1 30 décembre 2017 à 17:45:52

30 décembre 2017 à 22:33:00

...

-
Edité par PeguySeffi 30 décembre 2017 à 22:34:40

30 décembre 2017 à 23:25:04

Salut,

tu devrais re-travailler ton code afin de mieux le comprendre toi-même et pouvoir mieux t'y retrouver ;)

31 décembre 2017 à 11:33:58

Neitsabb a écrit:

Salut,

tu devrais re-travailler ton code afin de mieux le comprendre toi-même et pouvoir mieux t'y retrouver ;)



certainement mais je mis retrouve dans mon code mais ces pas normale que sa face sa, j'ai regarder plien de tuto quelqu'un ma aide est ces bizarre je suis bloqué o_O



-
Edité par NicolasRaulin1 31 décembre 2017 à 11:34:36

1 janvier 2018 à 22:50:00

slt, passe le code de ton menu pour voir
2 janvier 2018 à 8:11:31

Bonjour,

Pour commencer, je te suggère de mettre tout ton code css dans un seul et même fichier. 

Probleme avec le Respansive de mon site sur mobile

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown