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

Why is my block not visible on mobile?

Main reasons for an invisible block on mobile

Key points • Verify the block's visibility on mobile breakpoints • Check display, position, and height properties • Identify CMS interactions or conditions that hide the element • Test on real devices to validate the customer experience

When a block (section, column, image, button, promo banner, etc.) doesn't appear on mobile, the cause is rarely a pure "bug." In most cases, it's due to a visibility setting on breakpoints, a misconfigured CSS style, or an interaction that hides the block on small screens.

For a hotel website, this can directly impact your conversions if an offer, a booking button, or key information disappears on smartphones. Here's how to diagnose and fix the problem in Webflow.

1. Check the block's visibility on mobile breakpoints

On Webflow, each element can be shown or hidden depending on the device (desktop, tablet, landscape mobile, portrait mobile).

  1. Select the block in the Designer.
  2. Switch between tablet, mobile landscape, and mobile portrait breakpoints.
  3. In the display settings, check that it is not set to display: none.
  4. Ensure that no "utility" class (such as "hidden-mobile" or "hide-on-mobile") is obscuring it.

💡 Tip: Many blocks are intentionally duplicated to create a different desktop and mobile version. Make sure you're not simply viewing the hidden mobile version.

2. Check the height, margins, and overhang.

A block can be “present” but positioned off-screen or compressed to zero height.

Check: • that the section or parent doesn't have a fixed height that's too small • that there are no large negative margins pushing the element out of viewport • that the parent doesn't have `overflow: hidden` while the element is partially outside the viewport • that Flex or Grid alignment isn't compressing the block on mobile

💡 Tip: Make the parent element temporarily visible (overflow) to see if your block reappears. If it does, adjust the structure accordingly rather than leaving the overflow hidden, which obscures the content.

3. Examine display, flex, and grid on mobile

Some Flexbox or Grid configurations can make a block invisible if: • it is placed in a column with 0 or very narrow width • the container is set to display: flex without flex-wrap, which overwrites elements • the flex-basis or min-width proportions are not optimized for mobile

To correct: • enable flex-wrap if necessary • check the width of each column or grid element on mobile • adjust the min-height or min-width of important blocks (CTAs, offer boxes, etc.)

💡 Tip: On hotel websites, "room" or "offer" cards are often displayed in a grid. Test their display in a single column on mobile to avoid any overlap.

4. Check the interactions and animations

An interaction can hide a block if: • the animation starts with an opacity: 0 state or moves off-screen and never finishes on mobile • the trigger (on scroll, on hover) does not fire on small screens • a conditional animation does not take breakpoints into account

To do:

  1. Open the Interactions panel.
  2. Identify the animations associated with the page or element.
  3. Temporarily disable interactions to test if the block reappears.
  4. If so, simplify the animation or adapt it for mobile.

💡 Tip: For review pages (rooms, restaurant, offers), opt for simple micro-animations on mobile rather than complex scrolling effects.

5. Inspect the CMS conditions and filters

If your block is powered by the CMS (for example, a "Current Offer" or "Event" card), it may disappear if: • the Collection filter returns no results on mobile • a display condition is based on an empty field • the CMS item is in draft or unpublished mode

Check: • the Collection List filters (date, tags, status) • that the necessary items are published • that the fields used to display the block (title, image, text) are filled in

💡 Tip: For hotel websites, plan a “fallback” state if no offer is active, in order to avoid a completely empty area on mobile.

6. Control the element hierarchy and the z-index

A block can be "hidden" behind another if: • a sticky header or promotional banner has a z-index that is too high and covers the rest • a semi-transparent background or a mobile menu overlay remains displayed • the important block has a lower z-index than its surroundings

Solution: • Check the z-index of "fixed" elements (nav, pop-up, overlay) • Visually reposition the layer order • Reduce the height of overlays open on mobile

7. Test without cache and on real devices

Before concluding that there is a problem with the website's design: • clear your browser's cache • test in a private browsing window • test on a real smartphone (and not just using the editor's responsive mode) • verify that the latest version of the website is published

💡 Tip: Ask a team member (reception, management, sales) to test the page on their own phone. You'll get realistic feedback on the customer experience.

Conclusion

An invisible block on mobile typically stems from a visibility choice, a style poorly adapted to small screens, a misconfigured interaction, or a strict CMS requirement. By checking breakpoints, structure, interactions, and CMS data point by point, you can quickly identify the cause and restore a seamless experience for your visitors. For an effective hotel website, every important element must remain perfectly readable and accessible on smartphones.