Pourquoi mon bloc n’est pas visible sur mobile ?

Points clés
• Vérifier la visibilité du bloc sur les breakpoints mobile
• Contrôler les propriétés d’affichage, de position et de hauteur
• Identifier les interactions ou conditions CMS qui masquent l’élément
• Tester sur de vrais appareils pour valider l’expérience client

Quand un bloc (section, colonne, image, bouton, bandeau promo…) n’apparaît pas sur mobile, la cause vient rarement d’un “bug” pur. Dans la majorité des cas, il s’agit d’un réglage de visibilité sur les breakpoints, d’un style CSS mal configuré, ou d’une interaction qui masque le bloc sur petit écran.

Pour un site hôtelier, cela peut impacter directement vos conversions si une offre, un bouton de réservation ou une information clé disparaît sur smartphone. Voici comment diagnostiquer et corriger le problème dans Webflow.

1. Vérifier la visibilité du bloc sur les breakpoints mobile

Sur Webflow, chaque élément peut être affiché ou masqué selon le device (desktop, tablette, mobile paysage, mobile portrait).

1. Sélectionnez le bloc dans le Designer.

2. Passez sur les breakpoints tablette, mobile paysage, mobile portrait.

3. Dans les paramètres d’affichage (Display), vérifiez qu’il n’est pas sur display: none.

4. Assurez-vous qu’aucune classe “utility” (du type “hidden-mobile”, “hide-on-mobile”) ne le masque.

💡 Astuce
Beaucoup de blocs sont volontairement dupliqués pour avoir une version desktop et une version mobile différente. Vérifiez que vous n’êtes pas simplement sur la version cachée pour mobile.

2. Contrôler la hauteur, les marges et le débordement

Un bloc peut être “présent” mais positionné hors de l’écran ou compressé à zéro hauteur.

Vérifiez :
• que la section ou le parent n’a pas une hauteur fixe trop petite
• l’absence de marges négatives importantes qui poussent l’élément hors viewport
• que le parent n’a pas overflow: hidden alors que l’élément est partiellement en dehors de la zone visible
• que l’alignement Flex ou Grid ne compresse pas le bloc sur mobile

💡 Astuce
Passez le parent en overflow: visible temporairement pour voir si votre bloc réapparaît. Si oui, ajustez ensuite la structure plutôt que de laisser un overflow caché qui masque le contenu.

3. Examiner le display, le flex et le grid sur mobile

Certaines configurations Flexbox ou Grid peuvent rendre un bloc invisible si :
• il est placé dans une colonne à largeur 0 ou très réduite
• le conteneur est en display: flex sans flex-wrap, ce qui écrase des éléments
• les proportions flex-basis ou min-width ne sont pas adaptées au mobile

Pour corriger :
• activez flex-wrap si nécessaire
• vérifiez la largeur de chaque colonne ou élément grid sur mobile
• ajustez les min-height ou min-width des blocs importants (CTA, encarts d’offre, etc.)

💡 Astuce
Sur un site hôtelier, les cartes “chambre” ou “offre” sont souvent en grid. Testez leur affichage en 1 colonne sur mobile pour éviter tout écrasement.

4. Vérifier les interactions et animations

Une interaction peut cacher un bloc si :
• l’animation commence par un état opacity: 0 ou move hors écran qui ne se termine jamais sur mobile
• le trigger (au scroll, au survol) ne se déclenche pas sur petit écran
• une animation conditionnelle ne tient pas compte des breakpoints

À faire :

1. Ouvrez le panneau Interactions.

2. Repérez les animations liées à la page ou à l’élément.

3. Désactivez temporairement les interactions pour tester si le bloc réapparaît.

4. Si c’est le cas, simplifiez l’animation ou adaptez-la pour mobile.

💡 Astuce
Pour les pages critiques (chambres, restaurant, offres), privilégiez des micro-animations simples sur mobile plutôt que des effets complexes au scroll.

5. Inspecter les conditions CMS et filtres

Si votre bloc est alimenté par le CMS (par exemple une carte “Offre du moment” ou “Événement”), il peut disparaître si :
• le filtre de Collection ne retourne aucun résultat sur mobile
• une condition d’affichage est basée sur un champ vide
• l’item CMS est en brouillon ou non publié

Vérifiez :
• les filtres de la Collection List (date, tags, statut)
• que les items nécessaires sont bien publiés
• que les champs utilisés pour afficher le bloc (titre, image, texte) sont remplis

💡 Astuce
Pour les sites hôteliers, prévoyez un état “fallback” si aucune offre n’est active, afin d’éviter une zone entièrement vide sur mobile.

6. Contrôler la hiérarchie des éléments et le z-index

Un bloc peut être “caché” derrière un autre si :
• un header sticky ou un bandeau promo a un z-index trop élevé et couvre le reste
• un fond semi-transparent ou un overlay de menu mobile reste affiché
• le bloc important a un z-index plus bas que son environnement

Solution :
• vérifiez les z-index des éléments “fixes” (nav, pop-up, overlay)
• repositionnez visuellement l’ordre des couches
• réduisez la hauteur des overlays ouverts sur mobile

7. Tester hors cache et sur de vrais appareils

Avant de conclure à un problème de construction du site :
• videz le cache de votre navigateur
• testez dans une fenêtre de navigation privée
• testez sur un vrai smartphone (et pas uniquement via le mode responsive de l’éditeur)
• vérifiez que la dernière version du site est bien publiée

💡 Astuce
Demandez à un membre de l’équipe (réception, direction, commercial) de tester la page sur son propre téléphone. Vous aurez un retour réaliste sur l’expérience client.

Conclusion

Un bloc invisible sur mobile provient généralement d’un choix de visibilité, d’un style maladapté aux petits écrans, d’une interaction mal configurée ou d’une condition CMS stricte. En vérifiant point par point les breakpoints, la structure, les interactions et les données CMS, vous identifierez rapidement la cause et restaurerez une expérience fluide pour vos visiteurs. Pour un Site Web Hotel efficace, chaque élément important doit rester parfaitement lisible et accessible sur smartphone.