Bouton “Réserver” invisible sur mobile, que faire

Points clés :

Le bouton peut être masqué sur certains breakpoints (mobile, tablette).
Le style ou la position CSS peut empêcher son affichage.
Un bloc parent mal configuré peut cacher le bouton.

Lorsque le bouton “Réserver” n’apparaît pas sur mobile, le problème vient souvent d’un paramètre d’affichage spécifique à la version responsive. Webflow gère la visibilité de chaque élément selon la taille d’écran (desktop, tablette, mobile paysage, mobile portrait). Si le bouton est visible sur ordinateur mais pas sur smartphone, il est probable qu’il ait été masqué ou mal positionné sur un breakpoint mobile.

Étapes pour le rendre à nouveau visible

1. Vérifiez la visibilité dans le Designer

Ouvrez votre projet dans le Designer.
En haut, sélectionnez le mode Mobile (icône de smartphone).
Cliquez sur le bouton “Réserver”.
Dans le panneau Style → Layout, vérifiez que le paramètre Display n’est pas sur “None”.
S’il est masqué, remettez-le sur Block ou Flex.
Publiez à nouveau le site pour appliquer les modifications.

💡 Astuce : un bouton masqué sur un breakpoint le restera sur tous les breakpoints plus petits, sauf si vous le réactivez manuellement.

2. Vérifiez le positionnement et les marges

Parfois, le bouton est bien présent mais “hors cadre” :

Ouvrez la section ou le conteneur parent et assurez-vous qu’il n’a pas de overflow: hidden.
Réduisez les marges ou paddings excessifs sur mobile.
Vérifiez que le bouton n’est pas recouvert par un autre élément fixe (comme une barre de navigation flottante).

3. Vérifiez les interactions et conditions dynamiques

Si le bouton est lié à une condition CMS ou à une interaction :

Assurez-vous qu’il ne dépend pas d’un champ vide (par exemple, une URL de moteur manquante dans la Collection).
Désactivez temporairement les interactions pour tester si elles masquent l’élément.

4. Testez sur un vrai appareil mobile

Utilisez l’aperçu mobile intégré au Designer ou ouvrez le site sur un téléphone réel. Certains effets d’animation ou scripts tiers peuvent se comporter différemment selon les navigateurs.

Bonnes pratiques

Gardez le bouton “Réserver” bien visible, idéalement dans la barre de navigation ou en bas de l’écran.
Utilisez un style contrasté (couleur vive et lisible sur fond clair).
Testez toujours vos pages sur plusieurs tailles d’écran avant publication.
Si vous utilisez un bouton flottant, vérifiez que son z-index est supérieur à celui du reste du contenu.

Conclusion

Un bouton “Réserver” invisible sur mobile est souvent dû à un simple paramètre d’affichage. En quelques ajustements dans le Designer, vous pouvez le rendre visible et garantir une navigation fluide sur tous les appareils. Un bouton toujours accessible est essentiel pour maximiser les réservations directes sur votre site hôtelier.