Hi, I’m new to web design and have been going through the tutorials. I have specific questions and I haven’t been able to find the answers. I’m currently looking for private instruction. I’m spinning my wheels wasting a ton of time for something I think is pretty straight-forward.
Below is a link to a landing page. It has two buttons with hover states that display a list and also swaps out the main logo. How do I adjust the hover states for mobile devices. I have watched and re-watched videos for flex box and managed to make things work by trial and error, but I really don’t understanding what I’m doing. I’d greatly appreciate if someone could review what I’ve done and recommend how to correct and clean things up. Thank you for any help.
Desktops and touch devices are really different, and responsive design, in the way that elements only morph from a device to another, has limits.
Sometimes you need to design different approachs for different devices.
Especially if you’re using hover effect like this.
So the technique consist in having 2 versions of the element, one for desktop and one specifically designed for devices, and hiding your content designed for desktop on touch devices, and vice versa.
For menus, it’s really not a big deal to have that sort of duplicated content. And if you thing things well, you can even have uniques menus in symbols, that behave the differently in one or another of the 2 versions.
In your case, you could decide that mobile devices needs a straight forward experience and design a nice first screen with all the primary links, without having to hide them behind an effect. (or anything else that’s not relying on hover)
Also I noticed you have the same interaction placed on 3 different nested element. This is surely going to make things bug, please remove the interaction from 2 of the elements. Only let it on this element
