1485 sujets

Web Mobile et responsive web design

Bonjour,

j'ai un petit soucis que j'ai du mal à résoudre. J'ai fait une solution "mobile" pour mon portfolio (histoire de mettre enfin les mains dans le cambouis) malheureusement bien que cela marche très bien en redimensionnant ma page (max-width), j'ai un soucis d'affichage sur mon Iphone (max-device-width). En effet, alors que l'ensemble des contenus est à max-width=100% j'ai une coupure sur la droite qui rend l'ensemble disgracieux. Je sais que j'ai quelques petits détails à régler pour améliorer le rendu mais j'aimerais déjà résoudre ce problème qui m'empêche de travailler efficacement sur le reste.

Le site en question

Où ai-je pu faire une erreur pour obtenir cette largeur coupée... A savoir qu'en paysage comme en portrait j'ai cela.

Informations complémentaires :
appel css pour mobile et responsive
@media screen and (max-device-width: 480px), screen and (max-width: 480px) 


Ajout d'une balise meta avec attribut name="viewport" pour améliorer le rendu.
<meta name="viewport" content="width=device-width" />


Merci pour vos conseils Smiley smile
Salut,

En analysant rapidement le code, j'ai aperçu la présence de styles en ligne pour ton slide, notamment un width: 1200%. Sans doute ton souci vient de là.

Il vaut mieux utiliser les styles en ligne avec parcimonie, vu qu'ils sont prioritaires sur toute déclaration CSS externe. Essaie de déplacer ce width trop large dans tes CSS externes : ça facilitera le travail d'adaptation du slide.
J'ai testé alabourin en supprimant le fichier .js du slideshow, puis simplement le code html puis avec un display:none sur ma condition à 480... rien pour chacun.

Sinon effectivement je le vois le 1200% avec l'extension de dev. firefox mais introuvable dans mon code css ou js. D'ailleurs je vois pas trop d'où il sort vu qu'il a pas de classe css ou de balise.

De plus si c'était cette condition qui rendait mon ensemble coupé moche, ça devrait plutôt l'étendre non ? Assez bizarre ce p'tit bug...
Il y a un problème avec le menu (Firefox en mode responsive), c'est dû au fait que le float est appliqué au SPAN à l'intérieur des LI plutôt qu'au LI lui-même je pense.