[Résolu] Déboguage compliqué sur mobile

Bonjour
j'ai un soucis d'affichage avec un site que je viens de réaliser. lien vers le site

Sur certains mobiles, et avec certains navigateurs, la navigation ne s'affiche pas correctement.
Le site est réalisé avec Bootstrap 4.0.0 (version courante), avec une navbar classique.

Le repère A sur l'image montre la mise en page correcte: le bouton 'hamburger icon' en haut à droite qui se déplie pour montrer le menu. Si on scrolle dans la page, la navbar se voit ajouter un fond gris.

Dans certains contextes avec smartphone se produit le problème illustré au repère B: le bouton est hors du viewport, dans une bande verticale grise (probablement le fond de la navbar scrollée), ce bouton n'est pas visible et il faut le savoir et glisser du doigt pour le faire apparaître, ce qui est évidemment innaceptable...

Je ne comprends pas d'où ça vient, mon Html/Css est correct et je n'ai pas 36 smartphones pour tester, en plus..

Quelqu'un a t-il une idée ??


Modifié par lionel_css3 (13 Feb 2018 - 11:25)

kustolovic a écrit :

par contre la zone à droite est dûe au bouton «Découvrez tout ce que vous pouvez faire avec votre Goëland» qui est en nowrap

ah merci, tu penses que ça vient du bouton qui est trop large?

j'ai essayé de rajouter les classes d-flex et flex-wrap sur son parent, ça ne change rien...
J'essuie un peu les plâtres avec flexbox..

Je vais réduire la longueur du texte dans le bouton... ça sera plus prudent...

Salut moi je viens de regarder et sur mon téléphone j'ai ce décalage
Sur chrome aussi avec la visualisation responsive..

<nav class="navbar navbar-expand-lg navbar-light mb-3 fixed-top" id="navbar">

Cet élément est trop large...
Vu que c'est le même quelque soit la visualisation je suppose que tu as un resize quelque part...
Et bien ce resize se plante

Pas possible d'en voir plus sans le code ou du temps pour fouilller

espérant que cela t'aide

Je viens de réduire le texte dans ce bouton, donc vos nouveaux avis m'intéressent, surtout le tien pchlj ...
Bien sur vider votre cache avant lol

pchlj a écrit :
j'ai ce décalage
Sur chrome aussi avec la visualisation responsive..

Ah oui, je peux voir le problème sur Chrome aussi.. en fait j'ai l'habitude d'utiliser Firefox pour l'outil responsive, plus rapide à invoquer....
et ça a bien l'air de venir du bouton qui était trop rempli de texte, maintenant à savoir si cette bande grise a disparue aussi.

Je pense que le problème a disparu, à moins que quelqu'un puisse le voir apparaître..;

Je viens de regarder sur mon mobile et c'est nickel
T'as résolu le problème

pchlj a écrit :
Je viens de regarder sur mon mobile et c'est nickel
T'as résolu le problème

LOL, c'est Toi qui a résolu mon problème, avec Kustolovic

il n'y a plus la barre verticale grise non plus????
Modifié par lionel_css3 (13 Feb 2018 - 16:56)

non plus rien c'est vraiment comme ça devrait être
merci mais on a juste donnée les pistes

En plus j'avais déjà évoqué (avec moi même) ce problème des boutons avec du contenu un peu trop long mais bon, à force d'avoir le nez dedans....
En plus c'est un projet qui a un peu trainé car j'ai eu les éléments par saccades...
c'est souvent le problème.. quand le demandeur est pas dispo ou pas inspiré