I'm trying to make my footer responsive when screen size changes. Javascript works but its only when the page has been loaded. I dont know if there's way i can use html and css only......
var reswidth = window.screen.width;
var mql = window.matchMedia("screen and (max-width: 765px)");
if(reswidth < 756){
console.log(document.getElementById('logon-footer').children[0].setAttribute('style','position: static'));
} else if(mql.matches){
alert("Window is 800px or wider");
}
``
you can do that using The @media rule is used in media queries to apply different styles for different media types/devices.
Media queries can be used to check many things, such as:
width and height of the viewport width and height of the device orientation (is the tablet/phone in landscape or portrait mode?) resolution Using media queries is a popular technique for delivering a tailored style sheet (responsive web design) to desktops, laptops, tablets, and mobile phones.
You can also use media queries to specify that certain styles are only for printed documents or for screen readers (media type: print, screen, or speech).
In addition to media types, there are also media features. Media features provide more specific details to media queries, by allowing to test for a specific feature of the user agent or display device. For example, you can apply styles to only those screens that are greater, or smaller, than a certain width.
https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: yellow;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<h1>The @media Rule</h1>
<p>Resize the browser window. When the width of this document is 600 pixels or less, the background-color is "light blue", otherwise it is "yellow".</p>
</body>
</html>