Databases
StackOverflow2013
Postsdbo
POOne media query breakpoint disables links. Others are working perfectly
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POOne media query breakpoint disables links. Others are working perfectly
    text
    copied!<p>today I stumbled upon a very weird problem. I've got a site with responsive layout which uses @media queries and presumably there are breakpoints. One of them (or one of the resolutions, as a newbie I'm not so sure about the terminology) disables links in navigation bar, which I really can't understand, because between other breakpoints everything works perfectly well. </p> <p><a href="http://webdev.fit.cvut.cz/svacizde/BI-ZWU/" rel="nofollow">So here's the web - it occurs between 831px and 1025px</a></p> <p>Both HTML and CSS are valid. It occurs in all major browser, paradoxically except IE9 in which it works, but just partially. I've tried to google it, tried searching here, but I don't even have an idea what I should be looking for.</p> <p>What's even more weird is that there are almost no differences between particular queries on this class. It differs mostly in just numerical values. And I've tried changing them - well I've tried just everything I could've imagine, but I must admit this is my first web and I have no experience whatsoever, so maybe I'm just missing something fundamental.</p> <p>Oh, and here's a snippet of the code of the afflicted element</p> <pre><code>@media screen and (min-width: 831px) and (max-width: 1025px){ .topMenuNav ul li a{ display: table-cell; padding: 0 0.9em; vertical-align: middle; height: 1.5em; background-color: #8fbe00; font-size: 1.2em; color: #fbfbfb; text-decoration: none; } } /* same element, different query, almost no difference - working */ @media screen and (min-width: 1026px){ .topMenuNav ul li a{ display: table-cell; padding: 0 0.9em; vertical-align: middle; height: 1.7em; background-color: #8fbe00; font-size: 1.4em; color: #fbfbfb; text-decoration: none; } } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload