css responsiveness overlay
Hi! im currently working on a school project but i need some help regarding the responsiveness on one of my page overlays. I tried looking at Kevin's yt video ( https://www.youtube.com/watch?v=uuluAyw9AI0&ab_channel=KevinPowell ).
I need some help figuring out how i can make it work on a physical mobile screen or what i have done wrong, as it works in the f12 menu in chrome. I'll attach the files its regarding below.
I need some help figuring out how i can make it work on a physical mobile screen or what i have done wrong, as it works in the f12 menu in chrome. I'll attach the files its regarding below.
Kevin Powell
YouTube
Dealing with hover on mobile
We can't hover on mobile devices, so what can we do about hover animations and other things that we might need to have on laptops and desktops? Well, we have a media query for that!
🔗 Links
✅ My full build of this card: https://youtu.be/5DEq5cWNYt8
✅ Go even deeper with this great article looking at hover, but also pointer, any-hover and a...
11 Replies
Can you share a link to the site or replicate the problem in a code pen or sandbox or something?
Is a Netlify site enough?
anything live that shows the problem is good, though with codepen and codesandbox it's a tiny bit easier to edit things to try to help. If it's already on netlify, just link that 🙂
https://extraordinary-tarsier-6d2d40.netlify.app/ 😅 👍
(the exhibitions page)
You're using a
:hover pseudo class to show / hide the overlay and text on the gallery items. That can be problematic on touch screens since there's no cursor to hover over the element.
Read the note on hover with touch screens::hover - CSS: Cascading Style Sheets | MDN
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
You might want to use JavaScript to implement the functionality.
I used some java in the html part for it, i want the hover function for pc and non touch screens but click on/off for touch screens. It appears to work as intended for android phones but not iphone
Yeah Safari is usually the one with annoying inconsistencies. I'd try toggling the class using an
ontouchend event (if I recall correctly). That should work on all browsers.used a touchstart event and it worked! BUT now my exhibitions page does not work for galaxy phones somehow