How can I show a specific container, including text and an image, exclusively on mobile portrait mode in Webflow? I want to prompt users to turn their phone sideways. I couldn't find a "hide" button or similar feature mentioned in older posts or Webflow's content. Am I overlooking something? I've explored Webflow's resources, but haven't come across any solutions.

To show a specific container only on mobile portrait mode in Webflow, you’ll need to use a combination of Webflow’s display settings and a small bit of custom media query CSS since Webflow’s built-in visibility toggles only apply to device sizes, not orientation.

1. Use Webflow Display Settings to Hide on Default

• Select the container you want to show only on mobile portrait.
• In the Style panel, scroll to the Layout → Display section.
• Set display to "None" on all breakpoints except Mobile Portrait (≤479px).
• This hides the container on desktop, tablet, and mobile landscape by default.

2. Create a Custom Class for Detection

• Give the container a unique class like mobile-portrait-warning so you can target it with custom CSS.
• Make sure this container includes your image and message (e.g., “Please rotate your device.”)

3. Add Custom Code for Orientation Targeting

• Go to Page Settings (or Project Settings > Custom Code) depending on where you want this to apply.
• In the Before </body> custom code section, add the following inline CSS:

  `<style>

  @media screen and (orientation: landscape) and (max-width: 767px) {

    .mobile-portrait-warning {

      display: none !important;

    }

  }

  </style>`

• This code hides the container in landscape mode, even if it’s a mobile device. So it only shows up in portrait mode at mobile widths.

4. Publish and Test

• Publish your project and test it on a mobile device.
• Rotate the device to confirm the container appears only in portrait mode and disappears in landscape.

Summary

Use Webflow’s Display settings to restrict visibility to mobile, then apply a custom orientation-based media query to hide the container in landscape mode. This ensures your message appears only in mobile portrait mode, prompting users to rotate their phones if needed.