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 exclusively for Internet Explorer users, including IE 11, on a Webflow site, you can use CSS techniques to target IE specifically.

​

1. Create the Message Div

• Add a div element to your page: You can do this by dragging a div block from the Add panel onto your canvas.
• Set the text: Inside the div, write your message: "For the best experience, please open using Chrome, Firefox, or Safari. Thanks!"

​

2. Style the Message Div

• Assign a unique class to your div: Click on the div and give it a class name, such as "ie-warning".
• Set basic styles: Style it with background color, text size, padding, and more as desired.

​

3. Target Internet Explorer with Conditional Comments

• Use CSS hacks: While not typically recommended, CSS hacks can specifically target IE. Add the following CSS code within a <style> element in the Head Code section in your project settings:
• @media all and (-ms-high-contrast: none), (-ms-high-contrast: active) { .ie-warning { display: block; } }
• @media not all and (min--moz-device-pixel-ratio:0) { .ie-warning { display: none; } }
• Set the default display to none: In the Webflow Designer, ensure that the "ie-warning" div is initially set to display: none.

​

4. Add Custom Code

• Go to Project Settings: Navigate to the Custom Code section.
• Add the CSS code: Place the above media query hacks into the Head Code to ensure they load with the page.

​

Summary

To display a div exclusively for Internet Explorer users in Webflow, create and style the div, use CSS media queries to target IE with conditional comments, and ensure custom CSS is added in the Project Settings. This method leverages IE-specific CSS hacks to show the message only to IE users.