I'm currently developing a web application similar to Spotify for my personal use, but I'm running into some issues with the @media query as it doesn't seem to be working correctly.
Here is the CSS code:
/* Screen Adapting */
@media (height <= 730px) {
.txt-large { font-size: 14px; font-weight: bold;}
.txt-small { font-size: 11px; }
.txt-detail { font-size: 8px; color: #8E8E8E; }
i.fa {
font-size: 2px;
}
i.fa-plus {
font-size: 15px;
margin: 5px;
}
}
And here is the HTML for reference:
<div id="sidebar">
<!-- Sidebar content goes here -->
</div>
After trying different approaches, I discovered that changing the query to this format actually seems to work. However, I am still puzzled as to why the previous method did not yield the desired results:
/* Screen Adapting */
@media (min-height: 730px) {
.txt-large { font-size: 14px; font-weight: bold;}
.txt-small { font-size: 11px; }
.txt-detail { font-size: 8px; color: #8E8E8E; }
i.fa {
font-size: 2px;
}
i.fa-plus {
font-size: 15px;
margin: 5px;
}
}