Hide div to specific browsers

Hi everyone,

I’m looking for a method to target specific browsers (safari and edge) and hide certain divs to those browser.

Our partnering dev provided me this piece of code:

<script>

(document).ready(function() {
var ua=window.navigator.userAgent;
if(ua.indexOf(‘Edge’)||ua.indexOf(‘Safari’)){
console.log(‘ok’);
$(’.hide’).hide();
}
});

The console logs “ok” and no errors but hide() is not applied.

I used IX2 hide/show in Webflow. Is it possible that IX2 overrides the script? If so, is it possible to overrides IX2?

I’m really puzzled…

Otherwise, how do you guys deal with client owning 10 years old Macbooks and CSS Grid display issues on those?

Cheers!


Here is my public share link: LINK
(how to access public share link)

Do you actually have a element with a class of “hide”? Maybe you could share a link to your published project for diagnosis in browser developer tools?

Get them to download Chrome or Firefox so they can view sites with a modern browser if they can’t update the OS (Safari is bundled).

Hi webdev, had to get rid of the branding as the client didn’t specifically authorized me to share the project.

Here is the share link:

https://preview.webflow.com/preview/unbrandedproject2?utm_medium=preview_link&utm_source=designer&utm_content=unbrandedproject2&preview=f1d4a47a4728485e41df8524c3a28086&mode=preview

Can you publish unbrandedproject2?

Hi, very sorry forgot that crucial part indeed.

Project is published now.

IX2 is setting the elements to display block. So you need to probably target the wrapper.

I could just target $('.header-wrap').hide(); then probably add a plain header back for those clients. If you wanted to do CSS feature detection on old browsers, use modernizr.

I can’t thank you enough for your help. It works!

I will check modernizr.

Have a great day!