[Que c'est compliqué !!] Affichage sur mobile

Bonjour,
mon site comporte quelques bugs pas méchants, on fera avec...
cependant il ne passe pas le test de compatibilité mobile, important pour un meilleur référencement seo.
voici l'adresse
http://www.champ-magnetique-pulse.fr/
Tous les pages du site sont concernées et l'erreur est toujours la même :
Non adaptée aux mobiles car le Contenu plus large que l'écran ....
J'ai essayé, essayé, et encore essayé en mettant
<meta name="viewport" content="width=device-width,initial-scale=1">
mais rien n'y fait..
Avez-vous une astuce simple, évitant de recréer un site pour mobile et un site pour pc ?
Merci de votre aide.
Fanny
Modifié par Felipe (10 Apr 2015 - 16:49)

Bonjour,


Bah typiquement éviter de mettre des width fixée au pixel près.

#centre {
    width: 1000px;
}

Peut importe ta balise meta ton site fera toujours 1000px de large, donc ça déborde d'un mobile.
Tu peux le remplacer par un truc du genre :

#centre {
    width: 100%; /* Prend toute la largeur de l'écran, pas moins, mais pas plus */
    max-width: 1000px; /* mais s’arrête à 1000px max */
}

Et sinon en optionnel éviter de tout placer en float ça évitera plein de soucis et tu gardera un flux et un positionnement cohérent :

#centre {
    float: left; /* <- là */
    text-align: justify;
    width: 1000px;
}

ok mais dans ma page http://www.champ-magnetique-pulse.fr/ , je ne trouve pas width: 1000px; j'ai regardé dans le css, j'ai changé et rien n'y fait .... et ça marche toujours pas . Le contenu est toujours plus large que l'ecran ???

Celui que j'ai pris pour exemple

#centre {
    float: left;
    text-align: justify;
    width: 1000px;
}

viens du fichier structure.css

Mais il y a aussi d'autres trucs du même genre comme des images de 1000px de large.
par exemple : http://www.champ-magnetique-pulse.fr/images/adresseover.jpg

La compatibilité mobile c'est pas compliqué mais ça se travaille un peu quand même !
On ne peut pas faire rentrer des pastèque dans un citron comme dirait l'autre.

Renseigne toi un peu sur le design Fluide http://www.alsacreations.com/tuto/lire/547-faire-un-site-pour-toutes-les-resolutions.html ca devrait t'ouvrir des perspectives

Bonjour,

l'astuce en lien dans un mes précédents messages pourra t'aider, notamment img { max-width: 100% }

_laurent > Mieux vaut préférer width: auto; à width: 100%; (sauf quand ça fonctionne pas).

edit: j'ai édité le titre pour que ça ait un rapport avec le sujet
Modifié par Felipe (10 Apr 2015 - 16:49)

Felipe a écrit :
_laurent &gt; Mieux vaut préférer width: auto; à width: 100%; (sauf quand ça fonctionne pas).

yop je suis tout a fait de ton avis (il vaut meme mieux ne pas mettre de width du totu du coup, c'est son comportement par défaut non ?). par contre avec la cascade de float et les images qui dépassent j'ai pensé qu'un 100% ne serait pas de trop

Felipe a écrit :
edit: j'ai édité le titre pour que ça ait un rapport avec le sujet

+1, en plus c'est pas compliqué

qu'est ce que t'as fait exactement fanny64? en fait j'ai le même problem et ça marche pas pour moi.