Hello fellow Webflow users.
I bought the SUSHI Template, I like to learn by experimenting with the template and looking how things are done.
The problem is that when a hover is styled on a whole section, it is annoying to look at it on a iPad horizontal because it is the same view as the larger screens.
Can I bypass this problem?
Thank for helping.
Hi @casual11, there is no way to disable a hover interaction for certain devices, but one thing you can do, is to create a duplicate of the section in question, and on the duplicate, you give new class name to the element having the hover, and then remove that hover interaction. Then select the original section and go to Settings in your designer panel, and set the Visible on Devices section to only display that Section with the hover on Desktop. Then select the duplicate section you made, and set the Visible on Devices settting to be shown only on Tablet and mobile views.
I hope that helps, cheers, Dave
Thank you very much Cyberdave.
What I did is…
I went in my CSS and I created a media query for max 1024px.
Then I copied the section and I styled it to my liking.
My media query 1024px does not work.
Is there a way to make it work please.
I wrote it the same way as the others.
Thank you!
Here is my test with the red text.
@media (max-width: 1024px) {
.nav-link:hover {
border-top-color: #F00;
background-color: #FF0;
color: #F00;
text-decoration: none;
text-transform: lowercase;
}
}
Hi, can you share your public link, you can enable that from Site Settings page, and paste the public link here, so that we on the forum can look to see what’s happening on your site. Cheers, Dave
This is my link.
https://webflow.com/design/toilettage?preview=9bf1b6590be09ec835383078bf189ffc
I am french speaking so the site is in french.
Everything works fine cyberdave. Im am “picky” so I want to keep hovering the green section “À PROPOS” on laptop and PC’s but not on iPad Landcape and less.
It would have been great to have a iPad Landscape media query in Webflow
I would be very happy to solve the problem.
Thank’s for your time.
Hi, watch my video response, see if this helps you. I duplicated your section having the hover, applied a class to each copy of that section, one for Desktop and Mobile and then I made each section visible on either table or mobile views, or on Desktop…
See if that helps and post back here if you have more questions. Cheers, Dave