Is there a way to prevent an element from rendering on an HTML page specifically for Android 4.3 and older devices?
I have a problem with an absolute positioned element that overlaps the content on my website, making it unreadable. The elements are coded before the content, and everything works fine on all devices except for those running Android 4.3 and older versions.
I tried using a script to detect the operating system of the device, but it only identifies Android in general, not the specific versions I need to target.
You can find the site link here, and I'm referring to rotated background elements.
UPDATE: I made some progress by fixing the display issue on Android 4.2 for the second half of the content. However, I still can't figure out why the first two elements remain visible when they should be hidden as well.
This is the code snippet that worked for me (credit to the source here ):
var ua = navigator.userAgent.toLowerCase();
if(ua.indexOf("Android") >= 0) {
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
if(androidversion < 4.4) {
document.getElementById(rotate_section_1).style.display = 'none';
}
}