CSS class not working on media query with smaller screen - html

Question

I am sorry for the very specific question, but I’ve trying to make media queries work, but they won't and don’t even know why.
Basically, when the screen is smaller than 1454px, I want the classes in the media query to apply, that is to say, instead of a box on hover, it’s a simple underlining.
Here is the link to the actual website, if it’s any better.
document.querySelectorAll('a.link-ranking').forEach((aLink, _, arr) => {
aLink.onclick = () => {
arr.forEach(a => a.classList.toggle('link-ranking-active', aLink === a))
}
})
.link-ranking {
box-sizing: border-box;
position: relative;
padding: 8px;
color: #ffffff;
text-decoration: none;
}
.link-ranking::before,
.link-ranking::after {
content: '';
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
transform-origin: center;
}
.link-ranking::before {
border-top: 0.15em solid #48ffd5;
border-bottom: 0.15em solid #48ffd5;
border-radius: 0.3em;
transform: scale3d(0, 1, 1);
}
.link-ranking::after {
border-left: 0.15em solid #48ffd5;
border-right: 0.15em solid #48ffd5;
border-radius: 0.3em;
transform: scale3d(1, 0, 1);
}
.link-ranking:hover::before,
.link-ranking:hover::after {
transform: scale3d(1, 1, 1);
transition: transform 700ms;
}
.link-ranking-active {
box-sizing: border-box;
position: relative;
padding: px;
height: 100%;
width: 100%;
border-radius: 0.3em;
border: 0.15em solid #48ffd5;
}
#media screen and (max-width: 1454px) {
.link-ranking {
position: relative;
padding: 0.3em;
color: #ffffff;
text-decoration: none;
padding-bottom: 2px;
transition: all 0.35s linear;
background: linear-gradient(to bottom, #48ffd5 0%, #48ffd5 98%);
background-size: 0px 2px;
background-repeat: no-repeat;
background-position: left 100%;
}
.link-ranking::before,
.link-ranking::after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 0;
height: 2px;
background-color: #48ffd5;
transition: width .0.7s cubic-bezier(0.25, 1, 0.5, 1);
}
.link-ranking:hover::before,
.link-ranking:hover::after {
background-size: 100% 2px;
left: 0;
right: auto;
}
.link-ranking-active {
text-decoration: none;
color: #48ffd5;
position: relative;
cursor: pointer;
text-decoration: none;
display: inline;
padding-bottom: 2px;
transition: all 0.35s linear;
background: linear-gradient(to bottom, #48ffd5 0%, #48ffd5 98%);
background-size: 0px 2px;
background-repeat: no-repeat;
background-position: left 100%;
}
}
<div class="ranking" id="ranking">
<ul class="ul-menu">
<li class="li-result"><a class="link-ranking" id="Form">Survey Results</a></li>
<li class="li-result"><a class="link-ranking" id="Comparison">Table of Comparison</a></li>
</ul>
</div>

Answer 1

So while i was going through your stylesheet(main.css), i found that your expression inside media query i.e.
max-width: 1454px
is not as same as this
max-width: 1454px
The reason behind this is there are some hidden characters inside the expression that you have used. You can check this text to ascii converter and try converting the above two blockquotes, their text part looks the same but when converted to ascii they are different. The exact reason behind why this is happening would be vague without further details about the environment you used to write this css, but the solution to your issue is to just replace the existing media query with this max-width: 1454px.