Streaming live at 10am (PST)

iPad Pro media queries

Hey,

I am having issues getting the iPad pro (landscape) to work using custom code. To make it super simple, I have created 3 divs (desktop, tablet-portrait- tablet-landscape) and entered the following code. The issue is that this is now working when tested on chrome developer tools but when viewed on an iPad pro 12.9", the desktop div is being displayed when viewed in landscape. Any ideas on why this isn’t working? Thanks

@media only screen 

and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {

.desktop {display:none;}
.tablet-portrait{display:block;}
.tablet-landscape{display:none;}

}

@media only screen
and (min-device-width: 1366px)
and (max-device-width: 1366px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {

.desktop {display:none;}
.tablet-portrait{display:none;}
.tablet-landscape{display:block;}

}


Here is my site Read-Only: Webflow - media queries
(how to share your site Read-Only link)