Ipad Pro Breakpoints

Design help General
1

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)

1 Like
2

@Alistair_Gallop Did you manage to implement this with any success?
I’ve followed similar advice from other threads from @dram and the Ipad Pro is not responding to the commands.

@media only screen 
and (min-device-width : 1024px) 
and (max-device-width : 1024px)
and (orientation: portrait) 
and (-webkit-min-device-pixel-ratio: 2) { 
.arrow-ipad-button-left {display: block !important;}
.arrow-ipad-button {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) 
{
.arrow-ipad-button-left {display: block !important;}
.arrow-ipad-button {display: block !important;
}
3

Hi Mathew, sorry for slow reply. I have tried everything but never got the landscape to work on the iPad pro. Did you have any luck in the end?