On my website, I have implemented jQuery code to ensure that the height is always full-screen:
$(document).ready(function () {
'use strict';
sizeContent();
$(window).resize(sizeContent);
});
function sizeContent() {
'use strict';
var newHeight = $("html").height() + "px";
$(".wrapper").css("min-height", newHeight);
}
While this solution works perfectly for maintaining full-screen height, I encountered an issue when trying to add media queries to my CSS in order to adjust font sizes. It seems like the jQuery code may be interfering with the CSS's ability to calculate screen width. Is this a common problem? If so, what would be the most efficient way to address it without relying heavily on jQuery?
Thank you for your assistance!
Edit:
Below is the CSS code being used:
@media screen {
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
a {
font-family: letter-gothic-std, monospace;
font-style: normal;
font-weight: 400;
font-size: 1.1em;
text-decoration: none;
color: #6f97a7;
}
}
@media (max-width: 768px) {
a {
font-size: 2em;
}
}
Despite implementing these media queries, there is no change in the size of the links displayed on the website.