On Android I don#t have any problems with showing boxes with content inside but once I have tried to view web page on Iphone I can’t see text inside the boxes for some reason (boxes with hover text in references section). What might be wrong with the code? I use quite a lot of overrides because this is customized feature. I have tried different variations but it looks like my CSS is not fully compatible with Iphones Safari?
I can confirm that when I inject that rule into your live page with devtools and view in my iphone5s that it works to display the text and button. Of course the fact that it works in devtools is not 100% reliable but usually means that it will work at source.
Can you try adding my code and let me know when you have added it and I will re-test? (You may not have cleared cache etc).
No you would need to use max-width instead of min-width in your media query. min-width targets devices greater than that min-width.
Of course that doesn’t solve the problem for touch devices bigger than 768px (e,g, tablets, ipads , laptops or even some desktops).
When hover is providing important information you should display the information by default to all devices. You can then use js to detect if the device is not a touch device and then enhance with your hover effects.
You could also try the hover media query but I’m not sure how reliable it is.