Custom breakpoint for interactions

Design help Animations & Interactions
1

Is there a way to target specific breakpoints for interactions?

I have a hover interaction on cards that I disabled for tablet/mobile. However, I need it disabled for iPads with a width of 1024. I did a bunch of custom code to fix iPad 12 view, but its irrelevant if I can’t turn off the hover interactions.

Thanks so much in advance!

1 Like
2

Hey @jenevineb

Sometimes I have the same problems :smile: I think the best solution for now is > 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: http://help.webflow.com/site-settings/custom-code

Original post > iPad landscape mode loading desktop site - #2 by jaidenleach

Hope this helps :webflow_heart:

1 Like
3

@PeterDimitrov I may have to go that route! Unfortunately I have so many elements I will have to dupe lol. Thank you so much for the help!!

1 Like