Below is the css styling for a specific div:
.titleHome {
position: absolute;
top: 10px;
left: 12px;
width: 80px;
height: 50px;
z-index: 8;
}
My goal is to hide this div when the screen width exceeds 900px, and make it visible when the screen width is below 900px. I attempted the following media query, but it did not produce the desired result:
(start by changing css to have display: none;)
@media all and (max-width: 900px) {
.titleHome {
display: normal;
}
}
After some trial and error, I found that if I keep the css as it is and use the following media query, it works as intended:
@media all and (max-width: 900px) {
.titleHome {
display: none;
}
}
However, this achieves the opposite effect of what I want. How can I ensure the div disappears when the screen width is less than 900px?