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.
- Set the container’s display to “None” on all breakpoints except Mobile Portrait using Webflow’s display settings.
- Add a unique class (e.g.,
.portrait-warning) and use a custom CSS media query@media (orientation: landscape)to hide it in landscape mode.
To show a specific container only on mobile portrait mode in Webflow, you’ll need to use Webflow’s display settings in combination with custom CSS media queries, since Webflow’s built-in visibility controls are limited to device types but not orientation (portrait vs. landscape).
1. Use Webflow’s Built-in Display Settings to Hide by Device
- Select the container you want to show only on mobile portrait.
- In the Style panel, scroll down to the Layout section.
- Under the Device Preview Modes (Tablet, Mobile Landscape, Mobile Portrait), set the Display of that container:
- Set to “None” for Desktop and Tablet views.
- Set to “None” for Mobile Landscape view so it stays hidden in landscape.
- Ensure it is set to “Block” (or Flex, etc.) for Mobile Portrait.
This hides the container on all other device types, but it will still appear on both mobile portrait and landscape, which isn't what you want. So additional targeting is needed.
2. Assign a Unique Class or ID
- Add a custom class to the container, e.g.,
portrait-warning. - You’ll target this in your custom CSS.
3. Add Custom CSS for Orientation Targeting
Go to Page Settings (or embed with an Embed element).
Inside the Custom Code section, add the following inside
<style>tags:Example CSS:
@media (orientation: landscape) { .portrait-warning { display: none !important; } }This CSS ensures that your container only appears in portrait mode. When the device is in landscape, it’s hidden—even on mobile.
4. Test Responsiveness in Preview Mode
- Use Webflow’s Preview mode, but also test on an actual smartphone device and rotate it to confirm the warning hides and shows correctly.
Summary
To show a container only in mobile portrait, first use Webflow’s device display settings to hide the container on non-mobile views. Then, use a custom CSS media query targeting orientation: landscape to hide the container when the phone is rotated, achieving a portrait-only display.