The following appears very strange to me:
I have a website that is defined to change to a "mobile version" by just using CSS
@media only screen and (max-width: 45em)
The problem is - when I narrow down my document width and go below 45 em, my links won't work anymore (They also won't on Android). First I thought this might be due to my JavaScripts, but having made a seperate test.html that does not load any .js shows that it must be due to something else, probably the CSS.
Open it and you will find the buttons within the text working.
Now decrease the width of your browser untill you're below 45em document width. You'll note the background get's black. I've put a 5px green border around any -link to highlight them in narrow mode.
The buttons (links) won't work anymore in any browser except IE (of all things)...?!?!?
I've been searching the whole day, but didn't find the error. Can anyone help? For example, is there a way to debug CSS behaviour in browers? Thanks a lot.
You have a #menu-hover-zone element with width set to 14em - it covers your buttons on smaller screens. Remove that width in your media query stylesheet and you'll be OK.