Problème création version mobile

Par quentin arduino, il y a 8 ans

Les bases HTML/CSS

Bonjour, je viens de créer la version mobile de mon site. Mon site est hébergé sur mon propre serveur dans mon réseau local. Lorsque je me connecte en WI-Fi à mon réseau local(le même réseau que mon serveur web) la page version mobile s'affiche parfaitement.

Maintenant j'essaye d'y accéder via internet avec la 3G de mon téléphone et là surpise, le site est carrément déformé :(

Quelqu'un a t'il déjà rencontré ce problème ou a une idée?

Merci d'avance :)

7 réponses

Erwan™, il y a 8 ans

As-tu ouvert les ports de ta box ? Comment le site est-il déformé (un screenshot serait le bienvenu)

Erwan™, il y a 8 ans

Tu utilises une librairie CSS ? Bootstrap ?

quentin arduino, il y a 8 ans

J'utilise effectivement une feuille de style:

a{ color:#3E959B; text-decoration: none; } a:hover{ color:#2EE2EF; text-decoration: underline; } p{ font-face:arial; } .avatar { border-radius:50%; width: 40px; height: 40px; } #liste_utilisateur{ position: absolute; top:160; left: 1%; width:25%; height:72%; } #partage{ position: absolute; top: 160; left: 26%; width: 73%; height: 72%; } .entete_msg{ font-size: 16; } .entete_rep{ font-size: 14; } .body_msg{ font-size: 16; } .avatar_rep{ border-radius:50%; width:30px; height:30px; } .avatar_rep2{ border-radius:50%; width:35px; height:35px; } .poubelle_msg{ width: 50px; } @media screen and (max-device-width: 500px){ .avatar { border-radius:50%; width: 100px; height: 100px; } #liste_utilisateur{ display: none; width:0%; } #partage{ position: absolute; left: 0; width: 100%; height: 72%; } .entete_msg{ font-size: 40; } .entete_rep{ font-size: 35px; font-style: arial; } .body_msg{ font-size: 31px; } .avatar_rep{ border-radius:50%; width:80px; height:80px; } .avatar_rep2{ border-radius:50%; width:85px; height:85px; } .poubelle_msg{ width: 100px; } .input_rep{ width: 80%; height: 75; font-size: 40; } }
Erwan™, il y a 8 ans

Pas de Bootstrap, Semantic UI ? Tout est fait à la main ?

quentin arduino, il y a 8 ans

Je ne sais pas trop ce que c'est:/ Et oui c'est fait à la main.

Erwan™, il y a 8 ans

En fait, ton site doit s'adapter à la largeur de ton mobile. Soit en utilisant les media queries, soit en utilisant une librairie CSS du genre de Bootstrap. Ca s'appelle le responsive ;)