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 achieve the desired effect of showing a specific container exclusively on mobile portrait mode in Webflow, you can make use of Webflow's built-in responsive design features and custom CSS media queries.
1. First, select the container element that you want to display exclusively on mobile portrait mode.
2. Navigate to the Style panel on the right-hand side and open the Display settings.
3. Change the default display setting to "None." This will initially hide the container on all devices.
4. Click on the "+ Add class" button to add a class to the container element.
5. With the newly added class selected, click on the "+ New CSS rule" button below the class name field.
6. In the CSS rule editor, click on the "+ Add Media Query" button.
7. A media query rule will be added, and by default, it will target all devices. You can customize the media query to specifically target mobile portrait mode by adjusting the dimensions. The most common dimensions for mobile portrait mode are around 320px to 480px in width.
For example, you can set the media query as follows:
```
@media (max-width: 480px) {
.your-class-name {
display: block;
/* Add any other CSS properties you want to apply to this container */
}
}
```
In this example, the container with the specified class name will be displayed as a block element when the device width is below 480px.
8. Save the changes, and the container will now be visible exclusively on mobile portrait mode.
Remember to replace "your-class-name" with the actual class name that you assigned to the container in Step 4. Additionally, you can define any additional CSS properties within the media query to customize the appearance of the container for mobile portrait mode.
By utilizing Webflow's responsive design capabilities and custom CSS media queries, you can create a tailored experience for users and prompt them to rotate their phones for optimal viewing.