Skip to content
English - United States
Nous Contacter
  • There are no suggestions because the search field is empty.

The "Book" button is invisible on mobile; what should I do?

Identify the cause of the problem

Key points:

  • The button may be hidden on certain breakpoints (mobile, tablet).
  • The CSS style or positioning may prevent it from displaying.
  • A misconfigured parent block can hide the button.

When the "Book" button doesn't appear on mobile, the problem often stems from a display setting specific to the responsive version. Webflow manages the visibility of each element based on screen size (desktop, tablet, landscape, portrait). If the button is visible on a computer but not on a smartphone, it's likely that it has been hidden or incorrectly positioned on a mobile breakpoint.

Steps to make it visible again

1. Check the visibility in the Designer

  1. Open your project in the Designer.
  2. At the top, select Mobile mode (smartphone icon).
  3. Click the “Book” button.
  4. In the Style → Layout panel, check that the Display setting is not set to “None”.
  5. If it's hidden, put it back on Block or Flex.
  6. Republish the site to apply the changes.

💡 Tip: A hidden button on a breakpoint will remain hidden on all smaller breakpoints unless you manually reactivate it.

2. Check the positioning and margins

Sometimes the button is present but "out of frame":

  • Open the parent section or container and ensure it does not have `overflow: hidden`.
  • Reduce excessive margins or padding on mobile.
  • Check that the button is not covered by another fixed element (such as a floating navigation bar).

3. Check the interactions and dynamic conditions

If the button is linked to a CMS condition or interaction:

  • Ensure that it does not depend on an empty field (for example, a missing search engine URL in the Collection).
  • Temporarily disable interactions to test if they are hiding the element.

4. Test on a real mobile device

Use the mobile preview built into the Designer or open the site on a real phone. Some animation effects or third-party scripts may behave differently depending on the browser.

Best practices

  • Keep the “Book” button clearly visible, ideally in the navigation bar or at the bottom of the screen.
  • Use a contrasting style (bright, legible color on a light background).
  • Always test your pages on multiple screen sizes before publishing.
  • If you are using a floating button, ensure that its z-index is higher than that of the rest of the content.

Conclusion

An invisible "Book" button on mobile is often due to a simple display setting. With a few adjustments in the Designer, you can make it visible and ensure smooth navigation on all devices. A button that's always accessible is essential for maximizing direct bookings on your hotel website.