1485 sujets

Web Mobile et responsive web design

[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 ?? Smiley smile

upload/1518517519-40948-goeland-mobile.jpg
Modifié par lionel_css3 (13 Feb 2018 - 11:25)
Modérateur
Le bouton n'est jamais dehors chez moi,

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 Smiley decu
Meilleure solution
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 Smiley decu


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 Smiley cligne

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

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..;
pchlj a écrit :
Je viens de regarder sur mon mobile et c'est nickel Smiley cligne
T'as résolu le problème Smiley lol


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

il n'y a plus la barre verticale grise non plus????
Modifié par lionel_css3 (13 Feb 2018 - 16:56)
non plus rien Smiley cligne c'est vraiment comme ça devrait être Smiley smile
merci mais on a juste donnée les pistes Smiley cligne
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... Smiley smile
c'est souvent le problème.. quand le demandeur est pas dispo ou pas inspiré Smiley smile
Sujet clos
Aller à