Elements not showing up in certain view

Design help General
1

Currently trying to make the pages on my site primarily for viewing on mobile devices, so that involves moving and resizing every element. Some certain text boxes have refused to appear in the mobile view while editing no matter where I move it to on the original desktop view.

http://gasbags.webflow.com

2

Hi there,

When working with responsive design in Webflow, you can control element visibility across different devices using the breakpoint settings. Here’s how to manage element visibility:

The breakpoint selector at the top of the Designer lets you preview and style your site for different screen sizes. If elements are not appearing on mobile devices, first check the display settings for that specific breakpoint - the element might be set to “display: none”. You can restore visibility by changing the display property to an appropriate value like “block” or “flex”.

For a comprehensive guide on managing styles across different screen sizes, check out our detailed tutorial on styling across breakpoints.

Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.

3

@AlexHebdon Your provided link is not working.

Possibly your issue is likely due to incorrect stacking, hidden overflow, or absolute positioning conflicts.

1. Check Element Visibility Settings

  • Go to the affected text element in the Designer.
  • In the Styles Panel (right sidebar):
    • Ensure “Hide on Mobile” is OFF (eye icon).
    • Check if display: none or opacity: 0 is accidentally applied in mobile view.

2. Fix Overflow or Clipping Issues

If the text is inside a container with overflow: hidden:

  • Select the parent container.
  • Set overflow: visible in the mobile breakpoint.

3. Absolute/Fixed Positioning Conflicts

If the text uses position: absolute or fixed:

  • Ensure its parent container has position: relative.
  • Manually adjust top/left values in the mobile breakpoint.

4. Z-Index Stacking Problems

  • The text might be behind another element.
  • Increase its z-index (e.g., 999) in the mobile view.

5. Force-Reset Mobile Styling

Sometimes Webflow’s inherited styles break responsiveness:

  1. Select the text element.
  2. In the mobile breakpoint, click “Reset Styles” (circular arrow icon).
  3. Reapply only necessary styles (font size, margins).

6. Debug with Custom CSS (If Needed)

Add this to Page Settings > Custom Code > <head>:


/* Force-show hidden elements on mobile */
@media (max-width: 767px) {
  .your-text-class {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

Replace .your-text-class with your element’s class.