Problème création version mobile

quentin arduino
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™

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

quentin arduino
Auteur

Pour ce qui est de la box, oui j'ai ouvert les ports et je peux accéder au site depuis internet sans problème.

Voici une capture d'écran du site lorque je m'y connecte depuis le même réseau en WIFI:
[http://quentin-fr.ddns.net/capt_wiko2.png]()

Voici une capture d'écran du site en 3G depuis internet:
[http://quentin-fr.ddns.net/capt_wiko1.png]()

Erwan™

Tu utilises une librairie CSS ? Bootstrap ?

quentin arduino
Auteur

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™

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

quentin arduino
Auteur

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

Erwan™

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 ;)