1307 sujets

Web Mobile et responsive web design

Bonjour,
Je suis en train de travailler sur le coté responsive d'un site client, et je me retrouve avec un petit bug que j'ai énormément de mal à corriger.
Coté mise en page, j'ai des blocs qui sont sur desktop en
display:flex;flex-direction:row;

Quand je passe en BP mobile, je met tout ça en
flex-direction:column;


Je regarde lance l'inspecteur Chrome sur mon ordinateur en mode responsive, même taille que mon téléphone , et le rendu est correct. Voyez plutôt :

Mon header
upload/1495100022-49175-capturedncran2017-05-1811.26..png
Ma présentation
upload/1495100049-49175-capturedncran2017-05-1811.26..png
Mes avis
upload/1495100072-49175-capturedncran2017-05-1811.26..png

Mais lorsque je regarde sur mon mobile (cache vidé), je tombe sur ces souçis :
upload/1495100114-49175-img1163.png
upload/1495100218-49175-img1162.jpg
upload/1495100232-49175-img1164.png

Comme on peut le voir, le header est décalé, la flex-column des avis fait n'importe quoi, et tout le reste de mon contenu est décalé sur la gauche, sans aucune raison.
J'ai vérifié mes propriétés, aucune marge qui pourrait créer ce problème, j'avoue être perdu là .

J'ai regardé brièvement si des bug liés à flex-box auraient pu être la cause, mais je ne trouve pas .

Auriez vous une piste à me donner ?
Bonjour.

Difficile de dire quoi que ce soit sans plus de précisions mais le problème n'est peut-être pas lié à Flexbox directement : il prend en largeur toute la place qu'il peut mais peut-être que dans le cas du mobile, la largeur de votre conteneur n'est pas la totalité du viewport...

Ce n'est qu'une suggestion de ne pas vous focaliser totalement sur Flexbox...

Smiley sweatdrop
Modifié par Zelena (18 May 2017 - 12:27)
J'ai résolu ce problème avec un overflow hidden sur le container.
Assez étrange d'ailleurs, car j'ai logé les largeurs d'absolument tout le noeud DOM , avec le code çi dessous et aucun élément n'avais une taille supérieur à la largeur du container.

$("*").each(function({
 console.log($(this).width());
});

Modifié par benjamin-derepas (18 May 2017 - 15:01)