Ipad Pro too big for tablet breakpoint

The ipad Pro does not use the tablet breakpoint (I’m guessing because of pixel count).
This is a huge issue as any hover effects will not show on the ipad pro and menus etc that rely on hovering are made redundant (making a lot of the link block use cases redundant).
It would be much better for it to display the tablet version on smaller desktops than the desktop on larger tablets.
Is there any other way to identify tablets than breakpoints, because this WILL be an issue moving forward with tablets increasing in resolution. In the short term, perhaps moving the resolution for an ipad pro to tablet (at the expense of smaller desktops which will still be functional) would at least mean that any website that has not accomodated for the ipad pro conundrum is not losing functionality ON ANY DEVICE?


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Ah yes, the iPad Pro.

I actually wrote on this in my guide a bit earlier.

To be more specific you need to target both width and height AND pixel density of iPad Pro with media queries in your custom code area like so:

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

some properties

}

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

}

Try this and let me know!

Thanks for your help Dram!
Had a look at your guide, which ironically was something I was going to search for later in the week (custom cursors)!
So my coding knowledge is limited, and to make things even more frustrating my client has an ipad pro that he uses for everything, but I do not - which makes it a very frustrating testing situation.
Would I be correct in my understanding of the following:

  1. I should be posting this code in the settings custom code area as I want it to be applied across all of the pages. (Will this apply ALL of my “tablet breakpoint” layouts to this media query)?
  2. The code is basically specifying the exact pixel ratio of the ipad pro (inclusive of the pixel density) so this likely will not affect any desktops.
  1. yes, you should post it in the site settings (in the head area). But it will not apply your breakpoint layouts to this resolution, that’s not how it works. Unfortunately the only thing you can do with the media queries is target this exact resolution and manually add any properties you want to behave differently from what is otherwise rendered on screen of this size by default.

  2. Yes, this will target only iPad Pro

If what you wanted to do is to change webflow’s default tablet breakpoint then the only thing I can think of (and it works only if you host your site elsewhere) is to manually modify webflow.css that you get with export and change @media screen and (max-width: 991px) inside to whatever width you need. This will be as per your “It would be much better for it to display the tablet version on smaller desktops than the desktop on larger tablets” words.

It may be possible to change the line in the webflow.css on the fly with some javascript but I am not sure how. Perhaps someone with more technical knowledge will help you?

Thanks again Dram,
So my specific problem I have is that I have some link blocks set-up so that when you hover over them, the “info” and “find out more” text appears. On my tablet breakpoint, I have removed the hover effect, expanded the width of the link block and have the text and “find out more” element next to the image. If someone views this on an ipad pro however, they get the desktop version without the ability to see the hover info. This is a common element in a lot of websites (hover to reveal info of a link block) - which is a pretty big oversight on webflow’s logic if we have no control over the breakpoints.
So getting back on track, what is the expected result of pasting that custom code into the websites setting? Is it removing the cursor?
Cheers,
B

Well, in your case you would want to put inside this code (where it says “properties”) whatever is necessary to keep all the hover info visible. So if you hid some divs with info with display: none you will need to put inside the display: block (or flex or whatever) for that div.

It will look like that:

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

.info-div {

display: block;

}
}

If it is necessary to adjust any other property you will have to put it inside the code as well. Does it make sense?

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.