Décalage d'un code sur téléphone

[solvia]

Détails techniques

Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Google Chrome
Capture d'écran du problème :

Voir l'image:

Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://aurumregis.forumactif.com/

Description du problème

Bonjour/Bonsoir, Forumactif !
J'espère être dans la bonne section car j'avoue n'avoir jamais demandé ce genre d'aide !
En fait, voici le soucis : sur ordinateur, les fiches rendent nickel comme ceci :
https://cdn.discordapp.com/attachments/612052483874750487/798664553436020756/unknown.png

Mais une fois sur telephone, il y a un soucis de décalage, comme vous pouvez le voir sur le premier screen ! Pourquoi y a-t-il ce genre de soucis et comment palier à ce problème ?

Voici le html et le css de la fiche :

ici

Code:

<style>.ban_img {background: url('https://i.imgur.com/fdvS9J4.png');}</style><center>
<div class="ban_img"><div class="desc_cadre">fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - fact - </div></div><div id="titrecrows">une citation ici</div><div id="trianglecrows"></div><div id="blocpremier"><table><tr><td><div id="blocidentite"><div id="identcrows">identité</div><div id="imageidentite"><img src="https://i.imgur.com/5eW6CsF.png"/></div></div></td><td><div id="blocinfos"><div class="wsh">nom prénom</div>texte<div class="wsh">âge</div>texte<div class="wsh">or.sexuelle</div>texte<div class="wsh">métier / job</div>texte<div class="wsh">statut social</div>texte</div></td></tr></table><div class="fondcrows2"><table><tr><td><div class="bullephy">taille</div></td><td><div class="bullephy">poids</div></td><td><div class="bullephy">couleur des yeux</div></td><td><div class="bullephy">couleur de cheveux</div></td></tr></table></div><div class="bloc2"><table><tr><td><div class="bloc3"><div class="textcara">caractère

</div></div></td><td><div class="imgcara"><img src="https://i.imgur.com/9JcVczq.png" /></div><div class="imgcara"><img src="https://i.imgur.com/9JcVczq.png" /></div></td></tr></table></div><div class="fondcrows2"><div class="ava">avatar</div></div>
<table><tr><td><div class="dscpv"><b>nom du pouvoir  ∙ âge</b> | <i>petite description ici</i></div></td><td><div class="pouvoir"><strong>MAÎTRISE DU POUVOIR </strong><table><tr><td><div class="bloc33"><div class="pvcrows" style="width:50px;"></div></div></td><td> 5/10</td></tr></table></div></td></tr></table>

</div><div id="triangle2crows"></div><div class="fondcrows"><br /><br /><div id="blochistoire"><div class="raisonde">raison de l'intégration du gang</div>
texte

<div class="raisonde">histoire</div>
texte

<div class="resum"> résumé obligatoire ici
</div></div><br /><br /></div><div id="trianglecrows"></div><div id="blocdeux"><div class="textfin">
un petit mot de fin ici pour toi !
</div></div></center>

et le css :

Code:

/********************************************************** FICHE DE PRESENTATION *************************************/

#titredragons{
  width: 570px;
  text-align: center;
  font-size: 15px;font-style:italic;
  font-family: 'Open Sans';
  color: white;
  background:#DAB441!important;
  padding: 25px 0px 30px 0px;
  text-transform: uppercase;
  }
#titrepanthers{
  width: 570px;
  text-align: center;
  font-size: 15px;font-style:italic;
 font-family: 'Open Sans';
  color: white;
  background:#d7564e!important;
  padding: 25px 0px 30px 0px;
  text-transform: uppercase;
  }
#titrecrows{
  width: 570px;
  text-align: center;
  font-size: 15px;font-style:italic;
 font-family: 'Open Sans';
  color: white;
  background:#8c9fdd!important;
  padding: 25px 0px 30px 0px;
  text-transform: uppercase;
  }
#titrecobras{
  width: 570px;
  text-align: center;
  font-size: 15px;font-style:italic;
 font-family: 'Open Sans';
  color: white;
  background:#a676b6!important;
  padding: 25px 0px 30px 0px;
  text-transform: uppercase;
  }
#titrecivils{
  width: 570px;
  text-align: center;
  font-size: 15px;font-style:italic;
 font-family: 'Open Sans';
  color: white;
  background:#88B86C!important;
  padding: 25px 0px 30px 0px;
  text-transform: uppercase;
  }

  #blocpremier{
  width: 570px;
  height: auto;
  background-color: #131313;
  padding-top: 50px;
}
 #blocdeux{
  width: 570px;
  height: auto;
  background-color: #131313;
}
  /**#blocconteneur{
  width: 480px;
  height: 200px;
  display: flex;
  margin: auto;
  }*/
  /*#blocidentite{
  width: 189px;
  height: 226px;
  }*/

#triangledragons{
 border-right: 570px solid transparent;
    border-top: 15px solid #DAB441;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#trianglepanthers{
 border-right: 570px solid transparent;
    border-top: 15px solid #d7564e;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#trianglecrows{
 border-right: 570px solid transparent;
    border-top: 15px solid #8c9fdd;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#trianglecobras{
 border-right: 570px solid transparent;
    border-top: 15px solid #a676b6;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#trianglecivils{
 border-right: 570px solid transparent;
    border-top: 15px solid #88B86C;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}



  #identdragons{
  color: #DAB441!important;
  letter-spacing: 2px;
  text-align: center;
    font-family: poppins;
  text-transform:uppercase;
  }
#identpanthers{
  color: #d7564e!important;
  letter-spacing: 2px;
  text-align: center;
    font-family: poppins;
  text-transform:uppercase;
  }
#identcrows{
  color: #8c9fdd!important;
  letter-spacing: 2px;

  text-align: center;
    font-family: poppins;
  text-transform:uppercase;
  }
#identcobras{
  color: #a676b6!important;
  letter-spacing: 2px;
  text-align: center;
    font-family: poppins;
  text-transform:uppercase;
  }
#identcivils{
  color: #88B86C!important;
  letter-spacing: 2px;
  text-align: center;
  font-family: poppins;
  text-transform:uppercase;
  }
 
  #imageidentite{
  width: 165px;
  height: 165px;
  border: 12px solid white;
  }
  #imageidentite img{
    filter: grayscale(100%);
  transition: 0.8s;
  width:165px;
  height:165px;
  }
   #imageidentite img:hover{
  filter: none;
  }

#imageban{
  width: 570px;
  height: 250px;
  }

  #prenom{
  width: 189px;
  height: 22px;
  background: white;
  margin-top: 12px;
  text-align: center;
  color: #b95150;
  padding-top: 5px;
  font-family: 'Roboto';
  font-size: 13px;
  }

#blocinfos4 {
  background: #fff;
    font-family: Roboto;
    font-size: 11px;
    height: 169px;
    margin-left: -8px;
    padding: 10px;
    position: relative;
    text-align: justify;
  width: 275px;}

  #blocinfos{
    background: #fff;
    font-family: Roboto;
    font-size: 11px;
    height: 165px;
    margin-left: -8px;
    margin-top: 14px;
    padding: 10px;
    position: relative;
    text-align: justify;
    width: 275px;
}

#blocinfos::before{
  content: "";
  position: absolute;
  top: 37%;
  right: 100%;
  margin-top: -6px;
  margin-right: -1px;
  border-width: 28px;
  border-style: solid;
  border-color: transparent white transparent transparent;
  }
  #blocconteneur2{
      display: flex;
    height: 270px;
    margin: auto;
    width: 500px;
  }

  
  
  .fonddragons {
  background: #DAB441!important;
  width: 570px;
  }
.fondpanthers
{
  background: #d7564e!important;
  width: 570px;
  }
.fondcrows
{
  background: #8c9fdd!important;
  width: 570px;
  }
.fondcobras
{
  background:#a676b6!important;
  width: 570px;
  }
.fondcivils
{
  background:#88B86C!important;
  width: 570px;
  }


 .fonddragons2 {
  background: #DAB441!important;
        width: 470px;text-align:left;
    padding: 5px;margin-top: -7px;
  }
.fondpanthers2
{
  background: #d7564e!important;
     width: 470px;text-align:left;
    padding: 5px;margin-top: -7px;
  }
.fondcrows2
{
  background: #8c9fdd!important;
    width: 470px;text-align:left;
    padding: 5px;margin-top: -7px;
  }
.fondcobras2
{
  background:#a676b6!important;
    width: 470px;text-align:left;
    padding: 5px;margin-top: -7px;
  }
.fondcivils2
{
  background:#88B86C!important;
       width: 470px;text-align:left;
    padding: 5px;margin-top: -7px;
  }
  
  #blochistoire {
  background: #fff;
    font-size: 11px;
  font-family: 'Roboto';
  margin: auto;
  width: 450px;
  padding: 25px;
  text-align: justify;
  }
  
   #bloclife {
  background: #fff;
    font-size: 11px;
  font-family: 'Roboto';
  margin: auto;
  width: 450px;
  padding: 25px;
  text-align: justify;
  }
 

#triangle2dragons{
 border-left: 570px solid transparent;
    border-bottom: 15px solid #DAB441;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#triangle2panthers{
 border-left: 570px solid transparent;
    border-bottom: 15px solid #d7564e;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#triangle2crows{
 border-left: 570px solid transparent;
    border-bottom: 15px solid #8c9fdd;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#triangle2cobras{
 border-left: 570px solid transparent;
    border-bottom: 15px solid #a676b6;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
#triangle2civils{
 border-left: 570px solid transparent;
    border-bottom: 15px solid #88B86C;
    display: inline-block;
    height: 0;
    width: 0;
    background: #131313;
}
.bullephy { background: #fff;
    border: solid 1px #fff;
    color: #999;
    font-family: 'paytone one', sans-serif;
    font-size: 8px;
    font-weight: bold;
  border-radius:3px;
    height: autopx;
    padding: 3px 5px;
    text-transform: uppercase;
    width: auto;
  
  max-width:300px;
  -webkit-transition: all 2s ease-in;
  -moz-transition: all 2s ease-in;
  transition: all 2s ease-in;
}
.bullephy:hover { background: #e3e2e2;color:#131313;border: solid 1px #131313;
  -webkit-transition: all 0.5s ease-in;
  -moz-transition: all 0.5s ease-in;
  transition: all 0.5s ease-in;
}

.desc_cadre {
    background: white;
    width: 370px;
    height: 170px;
    overflow: auto;
    padding: 20px;
    text-align: justify;
    font-family: 'Roboto';
    text-transform: lowercase;
    font-size: 11px;
    line-height:;
    letter-spacing: 2px;
    color: #000;
    transition: all 2s;
    -webkit-transition: all 2s;
    opacity: 0;
}
.desc_cadre:hover{transition: all 0.5s; -webkit-transition: all 0.5s; opacity: 0.9;}

.wsh {text-align:right;font-style: italic;border-bottom: dotted 1px #131313;font-family: 'Open Sans';}
 .ava {color:#fff; font-size: 11px;padding: 3px;text-align: right;border-bottom: dotted 1px #fff;text-transform:lowercase;}

.ban_img {width:530px;height: 210px; padding: 20px;}

.imgcara img{width:130px;height:70px;margin-left:30px;border:solid 10px #f2f0f5;filter: grayscale(100%);  transition: 0.8s;}
.imgcara img:hover {filter:gratscale(0); }

.bloc2 {background: #fff;width:480px;height:225px;padding-top:10px;}
.bloc3 {width:240px;background:#fff;padding:10px;height:160px;overflow:auto;}
.textcara {font-size:11px;text-align:justify;font-family:roboto;}

.raisonde {text-transform:uppercase; font-size: 9px;padding: 3px;text-align:left;border-bottom: dotted 1px #131313;}

.textfin {color:#fff;
    text-align: justify;
    padding: 30px;
    font-size: 11px;}

.resum {background:#f8f8f8; padding: 10px;}


.pouvoir {    background: #2E2D2D;
    border: solid 1px #fff;
    border-radius: 5px;
    color: #fff;
    font-family: tahoma;
    font-size: 8px;
    letter-spacing: 1px;
    line-height: 9px;
    margin-left: -7px;
        padding: 20px;
    height: 39px;
    text-align: justify;
   }

.bloc33 {width:100px;background:#fff;border:solid 1px #fff;height:10px;border-radius:10px 10px 10px 10px;}

.pvcivils {background-image: linear-gradient(60deg, #88B86C, #b8d1a9);height:10px;border-radius:10px 10px 10px 10px;}
.pvdragons {background-image: linear-gradient(60deg, #DAB441, #e1d09b);height:10px;border-radius:10px 10px 10px 10px;}
.pvpanthers {background-image: linear-gradient(60deg, #d7564e, #f3aaa5);height:10px;border-radius:10px 10px 10px 10px;}
.pvcrows {background-image: linear-gradient(60deg, #8c9fdd, #bbc6ea);height:10px;border-radius:10px 10px 10px 10px;}
.pvcobras {background-image: linear-gradient(60deg, #a676b6, #d8b1e5);height:10px;border-radius:10px 10px 10px 10px;}

.dscpv {   background: #fff;
    border-radius: 5px 0 0 5px;
    font-size: 10px;
    height: 41px;
    overflow: auto;
    padding: 20px;
    text-align: justify;
    width: 265px;}

/*************************************** FIN FICHE PRES ************************************************/


Je pense que c'est lié à "identité" mais je n'en suis pas sûre...
Merci dans tous les cas !

[solvia]

up

[solvia]

up

[Bryx]

Bonjour Solvia,

Est-il possible d'avoir le lien vers votre forum sur le problème en question pour avoir un aperçu réel du problème, s'il vous plaît.

Bien cordialement,
Bryx

[Chacha]

Bonjour, Attention, cela fait 6 jours que nous n'avons pas de nouvelles concernant votre demande, si vous ne voulez pas voir votre sujet déplacé à la corbeille, merci de poster dans les 24h qui suivent ce message. Si votre sujet est résolu, merci d'éditer votre premier message et de cocher l'icône « résolu »

[Chacha]

Bonjour, Nous n'avons plus de nouvelle de l'auteur de ce sujet depuis plus de 7 jours. Nous considérons donc ce problème comme résolu ou abandonné. La prochaine fois, merci de nous tenir au courant de l'évolution de votre problème, ou pensez à faire un UP régulièrement ! Ce sujet est déplacé à la corbeille, merci d'ouvrir un nouveau sujet si nécessaire, en respectant les Règles générales du forum.