The media query is not properly adjusting for zoom levels

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!

Answer №1

It appears I made a silly mistake. I was conducting a test by adjusting my window's height, completely forgetting that I had actually written width.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Showing a cell border when a radio button is chosen

I am working with a table that contains input/radio buttons, and I am trying to figure out how to apply a border to a specific cell when the user selects the radio button within it. This will give the appearance of the cell being selected. I am not sure ho ...

Resolving Issues with Text Overlaid on an Image Hyperlink

Alright, so this problem might be a bit too complex for CSS/HTML to handle, but I'll give it a shot anyway. I have some images that are dynamically placed using the code from this website. What I want to do with these images is add a text overlay w ...

Arrange four divisions so that they are displayed in pairs on each row when the viewport width is smaller

I have a row of 4 div elements aligned horizontally from left to right. Each div takes up 25% of the screen width. I am looking for a solution to make them wrap when the user resizes the screen instead of overlapping each other. .MenuSett { margin-to ...

When the page loads in the React platform, a section of the footer unexpectedly overlaps with another component

After working on this section some time ago, I returned to find a strange behavior that I couldn't fix by changing the CSS or wrapping components in divs. If you want to see the issue, check out this screenshot: issueReact To view the code where the ...

Obtaining the API for a website's functionalities

I’m in need of downloading the API file that facilitates the connection between the website and database. How can I achieve this? I've attempted to use Httrack, wget, and open explorer, but they only seem to download the website itself. While I get ...

Conceal specific pages within the DataTable without deleting them

Currently, I am facing an issue where the dataTable paginates and removes the DOM pages along with the data. My goal is to extract all the data from the dataTable and convert it to JSON without losing access to the DOM when pagination occurs. I want to m ...

Leveraging JavaScript for Validating Radio Buttons

I've been following a tutorial guide on this specific website , but I'm encountering some difficulties despite following the exact steps outlined. Can someone provide guidance? Here is what I have done: <html> <script> fu ...

Tips for distinguishing between mobile devices and desktop computers on a webpage without using media queries

After examining a list of resolutions for phones and tablets used by CSS designers, I came to the realization that some devices have larger resolutions than most computers. This got me thinking about how design elements on my webpage might be affected. Th ...

Gallery of Disappearing Images

I am encountering issues with the image gallery on my website, as it seems to create a space to the right when viewed on screens smaller than 350px. This results in a gap on the entire right side of the page. My goal is to make this image gallery responsiv ...

Sideways movement of a single line within a table

Would you please help with a challenge I'm facing? I want to create a horizontally scrollable row that spans 100% of the page width without overflowing on top of the background image and while keeping the header text in focus. This is what I have att ...

ng-class not functioning properly when invoked

In my controller, I have the following function: $scope.menus = {}; $http.get('web/core/components/home/nav.json').success(function (data) { $scope.menus = data; $scope.validaMenu(); }).error(function () { console.log('ERRO') }); ...

Using CSS to style the footer with a body height set to 100%

I am currently working on an angularJS web app with a basic template structure: <html> <head> <link rel="stylesheet" href="style.css" /> </head> <body id="top"> <!-- Templates with vi ...

Leveraging HTML5 as a standalone application with Deskshell integration for seamless connectivity to MySQL

Currently working on a compact HTML5 application with deskshell. I am seeking a way to connect JavaScript directly to a MySQL database without relying on PHP or any server-side language. Any suggestions? ...

Converting HTML to PDF using Node and Express

Searching for a way to directly render a webpage as a PDF in the browser through Express. Essentially, I want to convert the page into a PDF without saving it. I came across a module that can convert HTML or a URL into a PDF format. https://github.com/ma ...

Padding the body of a single-page Angular application to ensure proper spacing and

How do I add padding to the body of a template in an angular ng-app? Where is the best place to include CSS for a ng-app rendered template? please refer to this fiddle for an example https://jsfiddle.net/aghsqnpa/ div.ngview { padding: 25px 50px 75p ...

unexpected behavior when using jquery click function

I am currently working on a unique custom radio element that showcases images instead of the standard radio buttons. The basic HTML structure looks like this: <div id="wrap"> <p></p> <input type="radio" data-check='class-c ...

Is there a way to ensure the website's menu bar remains on a single line?

I'm currently working on a website and running into an issue with the menu bar. Everything looks perfect, but on larger screens or Android devices, the "Contact Us" menu item sometimes jumps to a new line unexpectedly. If you visit the webpage and tr ...

Setting a default value within an input tag: A step-by-step guide

const [userData, setUserData] = useState([]); const handleUserInfo = (id) => { fetch(`https://602e7c2c4410730017c50b9d.mockapi.io/users/${id}`) .then(res => res.json()) .then(data => setUserData(data)) } <inpu ...

The problem of a static click function not working when clicked on a link. What is the solution for this

Details I am currently using a flickity slideshow that automatically goes to the next picture on a click. Within the slideshow, I have placed a button with text and a link to an external website (e.g. ). My Problem: When I click on the link, my slidesho ...

Iframe not functioning properly on Internet Explorer versions 8-11 when using WordPress

I'm having trouble getting my WordPress video to display when using an iframe. When I try to view it in Internet Explorer, the video automatically loads in Windows Media Player instead of playing through the iframe. The video files are local mp4s and ...