Streaming live at 10am (PST)

iPad Pro Resolution Breakpoint is Too Big

Hi all,

I am trying to have my website work on iPad Pro screen resolution. Webflow tablet’s breakpoint is too big, causing the Desktop version to be shown on the iPad (that is not good because I have hover effects on Desktop version that are useless on a tablet device).

I saw that this issue was addressed before and that the following code is supposed to solve this matter:

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

body {
    cursor: default;
}

.cursor-wrapper {
    display: none;
}

a {
    cursor: pointer;
}
}

@media only screen 
  and (min-device-width: 1366px) 
  and (max-device-width: 991px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 2) {
  
body {
    cursor: default;
}

.cursor-wrapper {
    display: none;
}

a {
    cursor: pointer;
}
}
</style>

However, the code does not seem to be working. I pasted it in the website head custom code but with no success.

Looking forward to anyone’s help!

Dan

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

What do you think should happen though? This script does exactly what it supposed to in the guide you took it from and it works only in conjunction with that tutorial, nothing more. It won’t change webflow’s default tablet breakpoint if that was something you tried to achieve.

Hi Dram,

Thanks for replying to my post.

I went back to your post and read it more carefully, and I saw that the code is intended to remove the crusor on tablet mode. My only wish is to make the tablet mode set for iPad Pro devices and I wasn’t successful in finding the proper code that will enable me to do so.

Would really appreciate to hear your suggestion on the matter.

Is there a reason you’re trying to get an iPad Pro to behave like a tablet? Apple is intentionally moving it more in line with a traditional desktop experience with their cursor support and showing desktop versions of websites within Safari.

1 Like

HI mikeyevin,

On desktop view, my website have hover effects that are useless when using a tablet (unless the user has a mouse connected to it). That is pretty much the reason I want to make sure that the website is set to tablet mode on iPad Pro and any other tablet device.

It’s really only a problem if the hover state hides/reveals elements on the page, so unless that’s the case here I wouldn’t worry about them being shown on tablets. Smaller tablet devices will still display the appropriate hover-less tablet breakpoint.

So this is really my issue.

The hover effect in my home page reveals multiple product images. You cannot see them unless you hover your mouse over the images titles (see read-only file).

https://preview.webflow.com/preview/dan-limonchik-portfolio-2-0?utm_medium=preview_link&utm_source=designer&utm_content=dan-limonchik-portfolio-2-0&preview=8623e7b3c48f1ecf114e7aa4fb101220&mode=preview

And this is something you will just have to accept :slight_smile: All touch users are used to not having some hover interactions. On the other hand you as a designer should make sure no critical functionality is hidden behind hover actions. And another thing to consider is ipad pro users are a miniscule percentage of your visitors, and this will likely be the case for some time yet.

But if you want just make use of new breakpoints functionality and created another breakpoint below which show your tablet layout (smaller than 1440 for exmaple)

1 Like

My apologies, I didn’t catch that when replying to this thread as it was in your original post. That being said, not having the hover state really doesn’t break functionality in your case but instead prevents thematic imagery from showing until a link is clicked.

The code referenced from @dram targets those devices, so you’re going to need to include the necessary code to change the appearance to match your tablet down breakpoints. Since you’ve got a fairly straightforward setup, I’d imagine your code will look something like the following:

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

.homepage-section, .homepage-section.magen, .homepage-section.betterbin {
    display: none;
}
.alt-ghero-grid {
    display: grid;
}

}

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

.homepage-section, .homepage-section.magen, .homepage-section.betterbin {
    display: none;
}
.alt-ghero-grid {
    display: grid;
}

}
</style>
1 Like

Hello dram and mikeyevin,

Thank you for your comments!

Mikeyevin, I copied and pasted the code you suggested in my website head settings and in the Designer costume head page, but it seems like it didn’t affect the tablet view. Unfortunately, my coding skills are very mediocre and I would be able to determine what might be the issue.

Is there something else I needed to do?

Do you mean it doesn’t affect the tablet view in the Designer or it doesn’t affect the view on an actual iPad? This will only show up when viewing the website on a device that’s targeted by your custom code.

What’s the URL for the live website?

It doesn’t affect the view on the iPad Pro.

Here is the live website link:
https://www.danlimonchik.com/

I don’t see the correct code on the live website:

I unchecked the actual website URL and tested the Webflow site version first.

I checked back the actual website so I believe you should be able to see the code embedded in the home page.

I’m not seeing the changes on my iPad Pro but I don’t have an easy way to inspect the applied styles on device so I can’t tell if it’s even being triggered by your custom code. That being said, I do see that the code is included (twice) within the <head> so theoretically if that code is valid it should be working.

Unless you want to continue down this rabbit hole, I think you have a few options:

  • Follow @dram’s advice and set your desktop style to apply to your 1440px and up viewport width so that the iPad Pro’s higher resolution is served the tablet design. Obviously this would mean that anyone viewing on a computer with a lower resolution would see the “tablet” version.
  • Modify your homepage style to better showcase those images/links without totally relying on hover states. Since you’re only featuring a few pages, this could be a three column “slice” view with the hover state simply enlarging the hovered column to take up more room on the screen - similar to this project that @PixelGeek walks through creating in his workshop here.
  • Accept that the small percentage of people browsing desktop sites on their iPad Pro’s (who already see a distorted perception of many websites relying on hover states) to see the website as is. Keep in mind your site does still function properly, so it’s a pretty low-risk issue.
1 Like

These definitely seems to be the options I am left with.

Really appreciate the time and thought you have given me with this project! Thank you so much.