I have been attempting to implement a media query that will cause my website to zoom out (shrink) for devices with a width less than 800px. However, it seems like the query is not having any effect. I placed the query in the head section of my HTML document, right above the link to my main CSS stylesheet. Below is the relevant CSS code snippet:
<html>
<head>
<link rel="stylesheet" type="text/css" href="cah.css" media="screen" />
<style>
@media all and (max-width: 800px) {
html {
zoom: 0.8;
zoom: 80%;
-moz-transform: scale(0.8, 0.8);
}
}
</style>
</head>
// my site
</html>
You can access my complete website here. My primary focus is on making this work in Chrome, but having compatibility with other browsers would be great too. I found this code in a previous Stack Overflow post since I am still relatively new to web development. Thank you for your help!