I have a div that increases its width when you hover on it. It won't work on a smartphone or tablet. The best way would be to make hover to click . But how should I do it? Sth like @media (max-width: 700px) or is there any good way to make it clickable on a touchscreen?
Richard Bilton
Front end ecommerce developer
the problem is that touch screen phones don't register a hover event.
you COULD with javascript
prevent default action, add a class which then does the same animation as hover and then with a second touch activate default action based on the fact it also has the touch class on the element...
personally I wouldn't. as users are used to one touch events and it would require considerable coding for every touch element on the website / app.
just make the website / app simple to use, quick to load and allow the user to get the information they are looking for in as few as clicks as possible without the razzle dazzle styling effects.