iPad landscape mode loading desktop site

Hello! I’m not sure if this is actually a problem, but I hope there’s a workaround anyway.

I included a few hover effects in my portfolio website. However, when using a tablet or phone and clicking on something with a hover effect, the element remains in the “hover” state until you click something else. Since this happens, I’m disabling/changing the “hover” state of the elements for the tablet/phone versions.

The problem is that the iPad loads the desktop website instead of the tablet one when in landscape mode, and that screws things up a bit! I know the version of the website that is loaded depends on the screen size of the device, so is there a way to control the minimum resolution required to load each version of the website (desktop/tablet/phone)?

If not, is there some other way to fix a device loading the incorrect website version?

Hi there :smile:

You’re on point for it all being screen dependent… The reason for this is because the native breakpoint for an ipad in landscape orientation is 1024px and desktop screens are in fact viewed as 922px and wider. So really the tablet landscape is the same resolution as desktop.

Because media queries are based on the width of the browser, to CSS there is no difference between ipad in landscape and a desktop screen. The max you can increase the tablet width viewport to is 991px, so there is no easy way to disable hover affects on ipad in landscape in the designer without added code for every element to you want to disable the hovering on.

Hi @dmaia, everything @jaidenleach said is correct, and I just wanted to add one more note. If you have some element that has interaction on desktop, you can create two copies of that element and give each a unique ID.

You can then add some custom css to the head of your site, to hide the element with an interaction on ipad screen width (element-one), and show the element without interaction starting at screen width = 1024px and below (element-two):

<style>
@media (max-width: 1024px) {
#element-one {display: none;}
#element-two {display: block;}
}
</style> 

The caveat is that you have to duplicate each element having an interaction, and remove the interaction from the second, duplicated element, and set that element’s display to none when the page is initially displayed on viewports over 1024px.

Webflow does not constrain you from doing special things like this, when the feature for doing this in the UI does not yet exist. See more about custom code: Custom code in head and body tags | Webflow University

I hope this helps, cheers, Dave

1 Like

Thank you cyberdave and jaidenleach!

Too bad there’s no way to change the resolution boundaries, but it’s okay :smile:
Nevertheless, I feel I should add that its very hard to find desktop/laptop screens with such a small width, especially since most screens nowadays are either 16:10 or 16:9 :wink:

cyberdave, I’ll try your suggestion, it might just work for what I’m trying to do !

1 Like

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