Webflow sync, pageviews & more.
NEW
Answers

How can I display a div that will only be visible to Internet Explorer users, including IE 11, on my Webflow site? The purpose of this div is to display a message saying "For the best experience, please open using Chrome, Firefox, or Safari. Thanks!"

To display a div that will only be visible to Internet Explorer users, including IE 11, on your Webflow site, you can use CSS hack and conditional comments. Here's how you can achieve this:

1. Add a new div block to your Webflow site where you want the message to be displayed.
2. Give the div block a class or ID for better targeting and styling (e.g., "ie-message").
3. Go to the Project Settings in Webflow by clicking on the gear icon in the left sidebar.
4. In the Project Settings panel, click on the Custom Code tab.
5. In the Head Code section, add the following CSS code:

```css

```

Explanation: In the CSS code, we first hide the "ie-message" div using the `display: none;` property. Then, we define a media query that targets only Internet Explorer 11 and below using the `@media` rule with the `-ms-high-contrast` property. When the media query matches, we override the `display` property to `block`, making the div visible to only Internet Explorer users.

6. Save the changes in the Project Settings.

Now, the "ie-message" div will only be visible to Internet Explorer users. Customize the styling of the div and the message text according to your design requirements.

Note: CSS hacks and conditional comments are techniques that specifically target older versions of Internet Explorer. They are not part of standard CSS or Webflow features, so use them sparingly and be aware of potential compatibility issues. Keep in mind that Webflow's support for older versions of Internet Explorer may vary, and it's usually recommended to encourage users to upgrade to modern browsers for the best experience.

Rate this answer

Other Webflow Questions