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.
TL;DR
- Use Webflow’s display settings to hide the container on all breakpoints except Mobile Portrait (≤479px).
- Assign a unique class to the container and add custom CSS using a media query to hide it in landscape orientation.
- Publish and test to ensure the container shows only in mobile portrait mode.
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-warningso 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.
