Today I encountered a puzzling issue on my website with a responsive layout that utilizes @media queries and breakpoints. At one specific breakpoint (or resolution, as I am still learning the terminology), the links in the navigation bar are inexplicably disabled, despite everything functioning perfectly at other breakpoints.
Here is the link to the website - the problem arises between 831px and 1025px
Both the HTML and CSS code are valid. This issue persists across all major browsers, except for IE9 where it only partially works. Despite searching extensively online and within forums, I am at a loss regarding what exactly I should be investigating.
What adds to the confusion is that there are minimal differences between the various queries affecting this particular element. Most discrepancies lie in numerical values alone. I have experimented with adjusting these values extensively, but being completely new to web development, I may be overlooking a fundamental aspect.
Below is a snippet of the problematic code segment:
@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;
}
}