Solved iPad Pro Specific breakpoints

I've bee scouring the forums to come up with a solution that works for iPad pro's breakpoints and below is what I got to somewhat work. The challenge with the iPad pro is it renders like a desktop but, it's a mobile device and a lot of the header designs just do quite work with it.

Do we need some CSS to detec the iPad pro and render differently? This seems to be another viewport Apple has thrown into the mix making our lives just a bit more difficult.

@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
#main-header, #top-header {
display: block!important;
}
.free-sticky-wrapper {
display: none!important;
}
#page-container {
padding-top: 79px!important;
}
.free-du-plugin-header {
display: none;
}
#main-header, #top-header {
display: block!important;
}
.et_header_style_left #et-top-navigation {padding-left: 330px;}
}
</style>

 

Update.

Went with a different approach with the menu by adjusting the max-width and this looks much better but, the iPad Pro is still the orphan in all this and maybe having a third header design (using visibility) is the real only way to handle this?

<style>

@media only screen
and (min-device-width: 1024px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
.fullwidth-menu {max-width: 85% !important;}
}
</style>

 

southernfloorcoating.com

The challenge becomes needing to think about iPad pro or desktops at 1024 width and iPad Pro is a different animal. With the new iPadOS, these same challenges are going to multiply.

 

Thanks for the code. The code I made seems to have a different outcome. Attaching screenshot with your code. You can see the earlier attachment and the difference.

 

Done, completely disabled any CSS I had and used all your CSS in theme options. You can visit the site now and see what you think?

A different approach and I think I prefer it. I can add social icons back to the header for iPad Pro.

Which media query should I use for detecting iPad to hide/show the Social Divi module?

I think this is going to be something we all have to get on board with. Apple owns the tablet market and the IPPro is here to stay along with iPadOS

 

Thanks, now we have something searchable in the forums for the iPad Pro and iPadOS for people to add to and use.