Version web sur mobile déformée

[wofhellboys]

Bonjour.
Je viens à vous pour un "simple" souci de navigation et certainement une balise manquante ou autre, mais étant une quiche en développement,...autant demander au pros
Voila, ma version du site sur pc (sous opéra ou chrome) est lisible, regardable et adaptée, mais dés que je teste sur la version mobile, tout est déformé, l'image de bannière dépasse de son conteneur et me cause des soucis...
Je bidouille ce que je peux mais rien n'y fait...
Si vous pouviez trouver ce qui ne va pas pas... mon forum est pour un jeu sur mobile, donc l'utilité principal d'utiliser la version web pour mobile avant de lancer mon forum.
La page du portail: http://fnm-on-wof.forumgaming.fr
et je post aussi au moins le css....si besoin d'autres éléments, n'hésitez pas!!
Merci à vous d'avance !!!

Code:

body
{
  background: url(https://i.servimg.com/u/f39/20/08/66/17/fond-s10.jpg); /* lien motif de fond */
  margin: 0;
  letter-spacing: 1px;
}
.bodylinewidth
{
  width: 900px;
  background: #1f1e1d; /* couleur de fond interieure */
}
.bodyline
{
  padding: 0;
}
a:link, a:hover
{
  text-decoration: none !important;
  font-weight: normal !important;
}

/* HEADER ET NAVIGATION */
#navigation
{
  width: 900px;
  margin: auto;
  background: #1f1e1d; /* couleur de fond navigation */
  text-align: right;
  padding: 3px 0;
}
#navigation img
{
  display: none;
}
#navigation a.mainmenu
{
  font-family: 'PT Mono';
  font-size: 12px;
  font-variant: small-caps;
}
#bloc_ban
{
  position: relative;
  z-index: 10;
  width: 900px;
  margin: auto;
  height: 400px;
  overflow: hidden;
  background: url(https://i.servimg.com/u/f39/20/08/66/17/fond-211.jpg) 900px 400px; /* banniere */
  border-bottom: 30px solid #131311; /* bordure sous banniere */
}
#render1
{
  position: absolute;
  top: 150px;
  width: 120px;
  height: 250px;
  background: url(https://i.servimg.com/u/f39/20/08/66/17/soldat12.png); /* render de gauche */
  margin-left: -30px; /* decalage du render */
  transition: 1s;
}
#render2
{
  position: absolute;
  top: 150px;
  width: 116px;
  height: 250px;
  background: url(https://i.servimg.com/u/f39/20/08/66/17/soldat13.png); /* render de droite */
  margin-left: 820px; /* decalage du render */
  transition: 1s;
}
#bloc_ban:hover #render1
{
  margin-left: -100px; /* decalage du render gauche au survol de banniere - pour pas de decalage mettre la meme marge que plus haut */
  transition: 1s;
}
#bloc_ban:hover #render2
{
  margin-left: 780px; /* decalage du render gauche au survol de banniere - pour pas de decalage mettre la meme marge que plus haut */
  transition: 1s;
}
#render1:hover
{
  margin-left: 0px !important; /* decalage du render gauche au survol de lui-meme - pour pas de decalage mettre la meme marge que plus haut */
  transition: 2s !important;
}
#render2:hover
{
  margin-left: 580px !important; /* decalage du render gauche au survol de lui-meme - pour pas de decalage mettre la meme marge que plus haut */
  transition: 2s !important;
}
/* toutes les marges des renders sont a adapter selon leur taille */
#render1_bloc, #render2_bloc
{
  position: absolute;
  width: 220px;
  height: 240px;
  background: #131311; /* couleur de fond du bloc apparaissant au survol des deux renders */
  border: 3px double #606736; /* bordures des cadres textes sur les renders */
  opacity: 0;
  transform: rotate(-20deg);
  margin-left: 90px;
  margin-top: 80px;
  transition-duration: 2s;
}
#render1:hover #render1_bloc, #render2:hover #render2_bloc
{
  opacity: 0.9;
  transform: rotate(0deg);
  transition-duration: 1s;
  transition-delay: 1s;
}
#titre_forum
{
  position: relative;
  z-index: 11;
  text-align: center;
  font-family: 'Six Caps', sans-serif;
  font-size: 28px;
  margin-top: -34px;
  color: #efcf54; /* couleur du titre du forum sous la banniere */
}
#sous_titre_forum
{
  text-align: center;
  font-family: 'PT Mono', ;
  font-size: 11px;
  letter-spacing: 10px; /* espacement des lettres du sous-titre */
  color: #990000; /* couleur du sous-titre du forum */
}
.ban_titre /* mise en forme des titres des cadres textes apparaissant sur les renders */
{
  text-align: center;
  font-family: 'Six Caps', sans-serif;
  color: #efcf54;
  font-size: 18px;
}
.ban_contenu /* mise en forme du contenu texte des cadres apparaissant sur les renders */
{
  width: 200px;
  margin: auto;
  height: 200px;
  overflow: auto;
  font-size: 10px;
  text-align: justify;
}

/* COLONNE */
#colonne
{
  position: fixed;
  width: 20%;
  height: 100%;
  top: 0;
  left: 0; /* pour coller a droite mettre right a la place de left */
  background: url(https://i.servimg.com/u/f39/20/08/66/17/fond_c11.jpg) bottom left no-repeat #1f1e1d; /* couleur et image de fond colonne */
  overflow-x: hidden;
  overflow-y: auto;
}
.colonne_titre /* titre du haut de la colonne */
{
  padding: 10px 0;
  text-align: center;
  font-family: 'Six Caps', sans-serif;
  color: #efcf54;
  font-size: 28px;
}
.colonne_paragraphe /* premier paragraphe de la colonne */
{
  font-size: 10px;
  text-align: justify;
  background: #131311;
  padding: 5px;
}
.colonne_liens
{
  margin: 20px 0;
}
.colonne_liens a /* mise en forme des liens rapides */
{
  display: block;
  width: 50%;
  background: #131311;
  margin: 5px 0;
  padding: 3px 3px;
  color: #93a166;
  font-size: 10px;
  font-variant: small-caps;
  font-family: 'PT Mono';
  text-shadow: 0px 0px 0px #606736;
  border-left: 5px solid #131311;
  transition: 1s;
}
.colonne_liens a:hover
{
  border-left: 5px solid #606736;
  text-shadow: 0px 0px 2px #606736;
}
.colonne_savoir /* bloc savoir au milieu de la colonne */
{
  width: 50%;
  margin: auto;
  max-height: 30%;
  overflow: auto;
  background: #131311;
  border: 3px double #606736;
  opacity: 0.9;
}
.savoir_titre /* titre du bloc savoir */
{
  text-align: center;
  font-family: 'Six Caps', sans-serif;
  color: #efcf54;
  font-size: 20px;
}
.savoir_contenu /* contenu du bloc savoir */
{
  text-align: justify;
  font-size: 11px;
  padding: 10px;
}

/* CATEGORIES */

.forumline /* mise en forme de tout les blocs cadres interieurs */
{
  width: 95%;
  margin: 20px auto !important;
  background: #272625;
  padding: 10px;
}
.forumline2 /* mise en forme des blocs des categories */
{
  width: 93%;
  margin: 20px auto !important;
  background: #272625;
  padding: 10px;
}
.categorie_titre h2 /* mise en forme du titre de categorie */
{
  dispay: block;
  font-family: 'Six Caps', sans-serif;
  font-size: 28px;
  text-align: center;
  color: #efcf54;
  font-weight: normal;
  text-shadow: 1px 1px 0px #1f1e1d;
  border-bottom: 1px solid #444341;
  padding-bottom: 2px;
}
.forum_bloc /* mise en forme du bloc forum */
{
  width: 95%;
  height: 120px;
  padding: 10px;
  overflow: hidden;
  margin: 20px auto;
  background: #131311;
  opacity: 0.9; /* opacite du bloc forum - mettre 1 pour le laisser normal */
  transition: 500ms;
}
.forum_bloc:hover
{
  opacity: 1;
}
.forum_left /* partie gauche du bloc forum avec description et effet coulissant */
{
  position: absolute;
  width: 400px;
  height: 120px;
  overflow: hidden;
}
.illu /* image de description */
{
  position: absolute;
  z-index: 1;
}
.description_contenu /* contenu de description */
{
  position: absolute;
  z-index: 2;
  margin-left: -400px;
  background: #131311;
  width: 400px;
  height: 75px; /* hauteur de description */
  overflow: auto;
  text-align: justify;
  font-family: 'PT Mono', ;
  font-size: 11px;
  letter-spacing: 2px;
  color: #444341;
  line-height: 10px; /* espace entre les lignes texte */
  padding-bottom: 2px;
  border-bottom: 1px solid #1f1e1d; /* bordures entre description et sousforum */
  transition: 1s;
}
.forum_left:hover .description_contenu, .forum_left:hover .sous_forum
{
  margin-left: 0;
}
.sous_forum /* mise en forme des sous forum */
{
  position: absolute;
  z-index: 2;
  width: 400px;
  height: 43px;
  overflow: auto;
  margin-top: 75px;
  padding-top: 2px;
  margin-left: -400px;
  background: #131311;
  text-align: center;
  transition: 1s;
}
.sous_forum a /* liens des sous forum */
{
  color: #93a166;
  font-size: 11px;
  font-family: 'PT Mono', ;
  text-transform: uppercase;
}
.sous_forum img
{
  vertical-align: middle;
}
.forum_stats /* zone des stats du forum */
{
  position: absolute;
  width: 150px;
  height: 120px;
  text-align: center;
  margin-left: 400px;
  font-family: 'PT Mono', ;
  font-size: 11px;
  letter-spacing: 6px;
  color: #444341;
}
.stats1 /* mise en forme des chiffres de stats */
{
  display: block;
  font-family: 'Six Caps', sans-serif;
  font-size: 30px;
}
.forum_right /* partie droite du bloc forum */
{
  position: absolute;
  margin-left: 550px;
  width: 245px;
  text-align: center;
  height: 120px;
  overflow: auto;
}
.forum_name a /* lien vers le forum */
{
  display: block;
  margin-bottom: 15px;
  font-family: 'Six Caps', sans-serif;
  font-size: 28px;
  font-weight: normal !important;
  color: #93a166 !important;
  opacity: 1;
  transition: 500ms;
}
.forum_name:hover
{
  text-shadow: 0px 0px 4px #606736;
  opacity: 0.8;
}
.last_mess /* dernier message */
{
  font-family: 'PT Mono', ;
  font-size: 12px;
}
.forum_icone /* icone old new lock du forum */
{
  position: absolute;
  margin-left: 776px;
  margin-top: 15px;
  border: 5px solid #272625;
  transform: rotate(10deg);
}
/* TITRES ZONES DE SAISIES ET BOUTONS */

input, select, textarea /* mise en forme des zones de saisie */
{
  background: #1f1e1d;
  padding: 3px;
  box-shadow: 0px 0px 0px #93a166;
  border: none;
  transition: 500ms;
}
input:focus, select:focus, textarea:focus /* mise en forme des zones de saisie selectionnees */
{
  box-shadow: 0px 0px 3px #606736;
}
.mainoption, .liteoption /* mise en forme des boutons */
{
  background: #131311;
  color: #efcf54;
  cursor: pointer;
  transition: 500ms;
}
.mainoption:hover, .liteoption:hover /* mise en forme des boutons au survol */
{
  color: #93a166;
}
td.catHead, th.thHead, td.catSides, td.spaceRow, th.thSides, th, th.thBottom, th.thCornerL, th.thCornerR, th.thHead, th.thLeft, th.thRight, th.thSides, th.thTop
/* mise en forme des titres de tableaux */
{
  text-align: center;
  font-family: 'Six Caps', sans-serif;
  color: #93a166;
  font-size: 28px;
  font-weight: normal;
}
h1.pagetitle /* mise en forme de titre */
{
  font-size: 28px;
  letter-spacing: 2px;
  font-weight: normal;
}
.cattitle, .secondarytitle h2 /* mise en forme de titre */
{
  font-size: 28px;
  font-weight: normal;
}
/* PROFIL */
.profil
{
  width: 200px;
  margin: 5px;
}
.rang /* mise en forme du rang texte penche sur le cote de l avatar */
{
  position: absolute;
  height: 20px;
  width: 320px;
  transform: rotate(-90deg);
  text-align: center;
  font-family: 'PT Mono', ;
  font-size: 11px;
  letter-spacing: 5px;
  line-height: 9px;
  text-shadow: 0px 0px 3px #000000;
  margin-left: -170px;
  margin-top: 153px;
}
.pseudo /* mise en forme du pseudo */
{
  width: 206px;
  background: #131311;
  font-family: 'Six Caps', sans-serif;
  font-size: 24px;
  text-align: center;
  letter-spacing: 3px; /* espacement des lettres */
}
.pseudo strong
{
  font-weight: normal !important;
}
.ava_img
{
  width: 200px; /* taille emplacement avatar */
  height: 320px; /* taille emplacement avatar */
  overflow: hidden;
  background: #131311;
  border: 3px double #606736; /* bordure avatar */
}
.profil_bloc
{
  position: absolute;
  width: 200px;
  height: 320px;
  margin-top: 3px;
  margin-left: 3px;
  overflow: hidden;
}
.profil_contenu /* mise en forme du contenu du profil */
{
  position: absolute;
  width: 190px;
  height: 310px;
  background: #131311; /* couleur de fond du bloc info profil */
  overflow: auto;
  opacity: 0;
  padding: 5px;
  font-family: 'PT Mono', ;
  font-size: 12px;
  margin-top: 310px;
  margin-left: 190px;
  transition: 1s; /* duree de la transition apparition du profil */
}
.profil:hover .profil_contenu
{
  width: 190px;
  height: 310px;
  opacity: 0.9;
  margin-left: 0;
  margin-top: 0;
}
.post_date /* mise en forme de la date du message */
{
  font-family: 'PT Mono', ;
  font-size: 11px;
  letter-spacing: 5px;
  padding-bottom: 5px;
  border-bottom: 1px solid #131311;
}
.message_contenu /* mise en forme des messages */
{
  padding: 20px; /* marge interieure */
  text-align: justify; /* texte justifie */
  font-size: 14px; /* taille de police */
  line-height: 14px; /* hauteur de ligne */
}
.code, .quote, .spoiler_closed, .spoiler_content
{
  padding: 5px;
  background: #131311;
  border: 3px double #606736;
  color: #D4CFBA;
}

/* EDITEUR DE MESSAGE */
.sceditor-container /* contenu editeur */
{
  background: #1f1e1d !important;
  border: none !important;
}
.sceditor-toolbar /* barre contenant les boutons */
{
  background: #131311 !important;
  border-bottom: 2px solid #272625 !important;
}
.sceditor-group /* groupes de boutons */
{
  background: #1f1e1d !important;
  border-bottom: 1px solid #000000 !important;
}
a.sceditor-button /* boutons */
{
  background: #272625 !important;
}
.sceditor-container textarea, .sceditor-container iframe /* zone de saisie texte */
{
  padding: 5px !important;
  color: #D4CFBA !important;
  font-size: 11px !important;
}

/* QEEL */
.qeel1 /* petit texte */
{
  background-image: url('https://i.servimg.com/u/f39/20/08/66/17/soldie12.png');
  width: 800px;
  height: 400px;
  text-align: center;
  font-family: 'PT Mono', ;
  font-size: 12px;
  letter-spacing: 5px;
  color: #93a166;
}
.qeel2, .qeel3 /* blocs en deux colonnes */
{
  width: 46%;
  height: 120px;
  padding: 10px;
  overflow: auto;
  margin: 20px auto;
  background: #131311;
}
.qeel2
{
  float: left;
}
.qeel3
{
  float: right;
}
.qeel4 /* bloc large */
{
  width: 95%;
  height: 60px;
  padding: 10px;
  overflow: auto;
  margin: 20px auto;
  background: #131311;
  font-size: 12px;
}
.qeel5 /* zone des groupes */
{
  width: 90%;
  text-align: center;
  color: #1f1e1d;
}
.qeel5 a /* groupes liens */
{
  font-family: 'Six Caps', sans-serif;
  font-size: 28px;
}
/* SUPPRESSION DES BORDURES */

    .row3Right, th
    {
    border: none !important;
    }
    .thHead
    {
    border: none !important;
    }
    .thCornerL, .thCornerR, .thTop
    {
    border: none !important;
    }
    .thLeft, .thRight
    {
    border-left: none !important;
    border-right: none !important;
    }
    .catLeft, .catRight
    {
    border: none! important;
    }
    .catHead
    {
    border: none !important;
    }
    .catBottom
    {
    border: none !important;
    }

Bonne après midi !!
Hell

[Neptunia]

Bonjour, et bienvenue sur le Forum des Forums Forumactif


La finalité de la version web est de s'afficher sur un ordinateur.
La version web n'est pas adaptée aux terminaux mobiles et c'est d'ailleurs la raison de la présence d'une version mobile. Seul awesomeBB est adaptée aux mobiles, du moins tant que l'on n'y fait pas n'importe quoi.

Vous définissez 900 px de largeur au .bodylinewidth, à la navigation et de nombreux autres éléments. Juste par curiosité, quelle est la largeur en pixels de votre écran de téléphone ??

On n'utilise jamais de valeurs absolues quand une même page doit être consultable par des appareils ayant des résolutions trop différentes.

[wofhellboys]

Bonsoir !
Je viens de faire des recherches web plus poussées sur la question et il est vrai que cela reste utopique à vouloir tenter l'aventure dirait on...
Pourtant avec tout ce qui se fait en css, je me berçais de douces illusions...
Tant pis, je vais chercher une autre alternative...
Ce design est un design "libre service" de NU, je l'aime bien et cela m'embête de devoir tout recommencer avec Awesome...
Mon futur site est principalement axé pour un jeu en ligne, donc des utilisateurs de mobile ou tablette, alors leur proposer un forum juste avec des couleurs.... pas très attrayant.
En tout cas je vous remercie de votre réponse et je peux donc je pense dire que le sujet est clos, même si il n'est pas résolu
Bonne soirée !!