Webflow sync, pageviews & more.
NEW
Answers

Is there a way to target Safari mobile specifically in Webflow and work around the issue of the mobile browser toolbar regions hiding a portion of the flex 100VH region? Would this require custom code or is there a solution within Webflow?

Yes, there is a way to target Safari mobile specifically in Webflow to work around the issue of the mobile browser toolbar hiding a portion of the flex 100VH region. This can be achieved with custom code.

Webflow provides a built-in conditional statement that allows you to target Safari mobile specifically. To use this, follow these steps:

1. Select the element that you want to apply the custom code to.
2. Go to the element settings panel on the right-hand side.
3. Under the "Advanced" tab, click on the "+ Add Field" button next to the "Custom Attributes" section.
4. In the input field that appears, enter `data-wf-ignore="true"` and press Enter.

This attribute will make the element ignore Webflow's built-in settings and allow you to apply custom code specifically for that element.

Once you've added the custom attribute, you can add additional custom CSS code to address the issue you're facing with Safari mobile and the flex 100VH region. For example, to ensure that the flexbox region is displayed correctly, even when the mobile browser toolbar is present, you can add the following CSS code:

```css
@media (max-width: 767px) and (-webkit-min-device-pixel-ratio: 0) {
.your-flexbox-element {
height: -webkit-fill-available;
}
}
```

Replace `.your-flexbox-element` with the class or selector specific to your flex 100VH region. The `@media` query targets screens with a maximum width of 767 pixels and a "-webkit-min-device-pixel-ratio" of 0, which is specific to Safari mobile. The `height: -webkit-fill-available` rule ensures that the flexbox element takes up the available vertical space, excluding the browser toolbar.

By using these techniques, you can specifically target Safari mobile in Webflow and apply custom code to address the issue of the mobile browser toolbar hiding a portion of your flex 100VH region.

Rate this answer

Other Webflow Questions