Problem with user scalability in desktop browsers: when zooming out to 33% and lower, all CSS vanishes

Having trouble understanding why my styling disappears at 33% zoom on Chrome and even worse at 75% on IE11.

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=yes">
<link href="css/zoom.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="css/fm_styles.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="css/ninja-slider.css" rel="stylesheet" type="text/css" media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)" />
<link href="images/fmstacked.ico" rel="shortcut icon" type="image/x-icon">
<script src="js/ninja-slider.js" type="text/javascript"></script>
<script type="text/javascript" src="js/w3-include-html.js"></script>

cssgoogle-chromeinternet-explorer-11viewport

Answer №1

The issue you are experiencing is directly linked to the media query defined in your CSS <link>. By removing the 

media="only screen and (max-width: 600px), only screen and (max-device-width: 1000px), all and (max-width: 1920px)"
from the <link>, you should see the problem disappear.

Zooming in or out on browsers can cause them to mimic different devices, resulting in changes to the max-width values. In my own testing, I observed that zooming out led to a viewport width larger than 1920px, causing the stylesheets not to be applied as expected based on the media query.

For further insight, consider checking out this thread.

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

Is there a Pug file that can connect to a Websocket and show the incoming values?

Check out this basic pug file snippet: p Hello The back end consists of typical components such as node, express, passport, and sql. You can set up a route like this: app.get('/example', (request, response) => { response.render('exam ...

cssnode.jswebsocketreal-time-updates

Guide to adding customized CSS and JavaScript to a specific CMS page on Magento

I'm trying to incorporate a lightbox for video playback on a specific page of my CMS. I've placed my CSS file in JS/MY THEME/JQUERY/PLUGIN/VENOBOX/CSS/myfile.css and the JS files in JS/MY THEME/jquery/plugins/venobox/js/myfile.js, but it doesn&ap ...

javascriptcsslayoutmagento-1.9

Ensure that buttons appear neat and organized when viewed on mobile devices

As a CSS beginner utilizing the Bootstrap framework, I have encountered an issue with my button layout on mobile devices. I have successfully created a set of buttons that display correctly on both desktop and mobile views. In the desktop view, you can se ...

htmlcssbootstrap-4

Prevent border duplication in CSS and retain border visibility

Check out this fiddle where I have three divs with a border-width of 2px. Originally, the issue was that each div's border gets duplicated in between, resulting in a total border-width of 4px. To solve this, I applied a margin-top of -2px to each div, ...

htmlcssborder

What is the best way to prevent the body from scrolling when scrolling on a fixed div without making the body's scroll bar disappear?

Is there a way to prevent the body from scrolling while I scroll on a fixed div? I attempted using overflow:hidden for the body, which stops scrolling but causes the page to shake when the scroll bar disappears. Is there a solution that allows me to keep ...

javascriptjquerycss

place an image next to a div element

Currently, I have a table-like structure with two columns that I am struggling to make mobile responsive. Take a look at the code snippet below: setTimeout(function() { odometer.innerHTML = '1925' }) .fiftyFiftySection { back ...

javascripthtmlcss

Highlighting Navbar Items

Can anyone provide advice on how to highlight a navbar item when clicked? I'm unsure if I should use Angular or CSS for this. Any guidance would be greatly appreciated. <div class="collapse navbar-collapse" id="navbarNav"> <ul class ...

cssangularbootstrap-4angular-ui-bootstrap

CSS Dilemma: Font Refusing to Change

Hey everyone, I'm new to web development and currently building a basic website on my computer. However, I'm facing an issue where the font I want to use is not changing. Both my HTML and CSS files are located in the correct folder and I am confi ...

htmlcss

Why is my second CSS animation, which is running late, causing such chaos?

I am currently in the process of animating a simple text. However, I am encountering some issues with making it disappear after a certain period of time: During the initial fade in, the opacity value does not seem to be respected, as the text seems to a ...

csscss-animationscss-transitions

The text alignment in Internet Explorer is off

After testing this website on both Firefox and Chrome, the alignment in the "Releases" section appears to be correct: However, when viewed in Internet Explorer, some of the text seems to be aligned in the center for unknown reasons. I have been struggling ...

htmlinternet-explorercssalignment

When the Model popup is activated, it is essential for elements to have an adequate color contrast

Our team is utilizing the axe dev tool for accessibility testing. We encountered an issue where elements behind a model popup (Kendo React model with position: absolute) were displaying insufficient color contrast errors. Upon changing the absolute positio ...

javascripthtmlcssreactjskendo-react-ui

CSS | Creating gaps between elements within a form

My form is currently inside a flexbox card with two sides - left and right. The left side displays a picture, while the right side contains the actual input fields. I'm looking to add more space between the different inputs as they feel too cramped at ...

htmlcssflexbox

Maintaining responsiveness, CSS grid will automatically adjust the height of each element to be equal

I am facing an issue with my grid layout. Each element in the grid has an image and other divs below it. The problem arises when the screen size changes, causing the elements to scale automatically due to responsive width. I want all the images to have the ...

htmlcsscss-gridresponsive

The scroll functionality does not seem to be functioning as intended on mobile devices when

Hey there, I'm currently working on making my navbar sticky and applying it when the page is scrolled. The code I have works flawlessly on desktop, but unfortunately, it doesn't seem to work on the mobile version. Any suggestions? window.addE ...

javascripthtmlcss

CSS Transform animation does not work when a class is added programmatically, although it functions properly when toggling the class in Chrome

Attempting to create an animation for the transform of a div. Below is the code with transition and transform properties in Safari: #mydiv{ transition: all 2.3s cubic-bezier(1, 0, 0, 1); transform: scale(0.5); background:white; padding:30 ...

jquerycsscss-transitionscss-transforms

Placing an Image in Next.js

I've been trying to position my image all the way to the right of the page using CSS properties like position: absolute and right: 0. I've also attempted setting the parent element's position to relative and the image's position to abso ...

cssreactjsnext.js

Is there a method to ensure equal alignment of the <div class="card"> elements in Bootstrap?

I need help figuring out how to align this card uniformly with the others: https://i.sstatic.net/x2wZ2.png In the image below, you can see that the card for the top reason for downtime doesn't match the other cards. I want them all to be the same he ...

cssbootstrap-4frontend

Guide on positioning a span element to the left using the margin auto property in CSS for Angular 4

Having trouble with moving numbers highlighted to the left with names in CSS. I've tried using flex direction and margin auto but can't achieve the desired result. https://i.sstatic.net/kRJOb.png Here is my HTML code: <section class="favorit ...

javascripthtmlcssangulartypescript

ToggleButton4 Framework is a user-friendly tool for creating interactive

I am currently working with Bootstrap 4 to design a toggle button; however, when I click the button, the checkbox does not update, despite the fact that the active class is being applied. Even when I use $('.btn-group-toggle').button('toggl ...

javascripthtmlcsstwitter-bootstrap-4

How can I use jQuery to target elements other than the vertical scrollbar when

Here is how I am utilizing the mouseleave jquery event $(document).ready(function(){ $(document).mouseleave(function(event) { //perform a task }); }); Is there any method to prevent this event from triggering when a user scrolls ...

javascriptjqueryhtmlcss