Streaming live at 10am (PST)

Ipad Pro Breakpoints

I am trying to get my head around the issue with iPad pro breakpoint and attempting to use css media queries to fix it. Below is a very simple example but I can’t even seem to get that to work?

https://alistairs-first-project-e51933.webflow.io/ipad-breakpoint-test

Using the following code:

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

#desktop-elephant {display: none;}
#mobile-elephant {display: block !important;}

}

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

#desktop-elephant {display: none;}
#mobile-elephant {display: block !important;}

}

I have tested on chrome and also on an iPad pro 12.9" but the #destop-elephant is still showing up on the iPad?


Here is my site Read-Only: https://preview.webflow.com/preview/alistairs-first-project-e51933?utm_medium=preview_link&utm_source=designer&utm_content=alistairs-first-project-e51933&preview=ec9e9cf99f2993e5208203623534af81&pageId=5f1191d1d6c4544f130e5622&mode=preview
(how to share your site Read-Only link)