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.
- Use Webflow’s display settings to show the container only on the mobile portrait breakpoint and hide it on all other breakpoints.
- Optionally, add custom CSS media queries to ensure the container is hidden in landscape orientation even on mobile.
To show a specific container only on mobile portrait mode in Webflow, you need to use Webflow's built-in display settings for each breakpoint. These allow you to control which elements appear based on screen size and orientation. Here's how to do it:
1. Use Webflow’s Display Settings by Breakpoint
- Select the container (e.g., a
div block) that contains the text and image you want to show only on mobile portrait. - In the Style panel, look for the Display section (under the “Layout” section).
- Make sure you're in the mobile portrait breakpoint (320px by default). You can access this via the device icons at the top center of the Designer.
- Set the container to “display: block” or “flex” — whatever makes sense for your layout.
2. Hide the Container on All Other Breakpoints
- Still in the Style panel, go to each of the other breakpoints:
- Desktop
- Tablet
- Mobile landscape
- On each of these, select the container and set Display: None under the Layout section.
- This ensures the container is only visible on mobile portrait.
3. Optional: Add Orientation-Specific Visibility Using Custom CSS
If you need even more precision (e.g., hiding on landscape even if the screen width matches mobile), you can add custom embed CSS using the <style> tag via an Embed component or in the Page Settings > Custom Code.
Use this optional CSS:
- To show only in portrait orientation, wrap this in a
<style>: @media screen and (orientation: portrait) { .portrait-only { display: block !important; } }@media screen and (orientation: landscape) { .portrait-only { display: none !important; } }- Then assign the class
portrait-onlyto your container in Webflow.
This ensures greater control over orientation even within the same screen size.
Summary
Use Webflow’s display settings per breakpoint to show your container only on mobile portrait, and optionally apply custom CSS media queries to hide it in landscape mode explicitly. This lets you prompt users to rotate their phones when on mobile.