I have a very simple media query. However, it is not working. Here's the code:
<!DOCTYPE html><html><head><meta content="width=device-width, initial-scale=1" name="viewport" /><style>
#landscape-div {
display: none;
}
@media (min-width: 800px) {
#landscape-div {
display: block;
}
}
</style></head><body><div id="landscape-div">fsfsfsfsfsdd</div></body></html>Expected result: the div should show up only when the minimum width is more than 800px.
However, it is showing up all the time. Why is this happening?
Edit: Edited the code as suggested by answers. Still not working.