Mobile Landscape vs Desktop

Design help General
1

Hey all,

I have a rotate warning thats only supposed to be active on mobile landscape. When viewing the site on a desktop and I resize my browser window to test the responsiveness of the design, the div warning thats only supposed to show on mobile landscape shows and blocks the mobile layout on desktop. Any workaround to this?

been working with a bit of code but this doesn’t seem to work

@media (min-width: 768px) and (orientation: landscape) {
.box-notify {
display: none;
}
}

Here is my site Read-Only: https://preview.webflow.com/preview/sd-clothing?utm_medium=preview_link&utm_source=dashboard&utm_content=sd-clothing&preview=3e2e2bf3811973021a67ba7cf4a78045&mode=preview
(how to share your site Read-Only link)

2

Only through css you don’t get there I’m afraid. Here, only the width of the screen is taken, regardless of mobile or screen.
Maybe you can do something with javascript, browser recognition?