Having trouble finding the right css selector to hide this div on mobile screens:
<div w3-include-left-html="borders/border-left.html"></div>
Tried various selectors with no success. For example:
<style>
@media screen and (max-width: 900px) {
div.borders/border-left.html {
display: none;
}
}
The div code with URL is functioning properly, but the selector to conceal it on mobile devices remains elusive.
No luck finding a solution on StackOverflow for utilizing a css selector with div code containing a URL like the above example.
Any insights or suggestions would be greatly appreciated.
Thank you!
NOTE: Complete code including the div file is provided below. It's used for dynamically inserting menus via HTML files on our extensive website and is working well. Issue arises when trying to hide certain menus on smaller screens. Unable to find a solution on W3 or any other sources.
<!DOCTYPE html>
<html>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/*loop through a collection of all HTML elements:*/
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-left-html");
if (file) {
/*make an HTTP request using the attribute value as the file name:*/
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/*remove the attribute, and call this function once more:*/
elmnt.removeAttribute("w3-include-left-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/*exit the function:*/
return;
}
}
};
</script>
<body>
<div w3-include-left-html="borders/border-left.html"></div>
<script>
includeHTML();
</script>
</body>
</html>