How to disable CSS media queries when in desktop mode

Question

The following media query isn't working. I want it to only affect devices less than 415px, but it's affecting all of my code, i.e. devices >415px

The Code:

    @media only screen and (max-width: 415px) {
       .anchor-offset {
          height: 80px; 
          margin-top: -80px; 
        }
    }

At the moment this is applied to all of my HTML elements which have the class .anchor-offset.

Thank you in advance.

If you could attach your code's snippet here, It would be a little comprehensive for us to understand and then we could help maybe — Uchiha Itachi
– Uchiha Itachi, Commented Jun 17, 2021 at 6:50
Also the media query syntax with (max-width: 415px) will only trigger when screen size is 415px or lower. Hence, there could be something else which is causing you the problem — Uchiha Itachi
– Uchiha Itachi, Commented Jun 17, 2021 at 6:53
There are a lot of code so it's going to be hard to show everything. I jsut want to know how to disable a media query for a desktop device. Since the media queries I am only using for mobile devices or is there another way to do this? — Franco
– Franco, Commented Jun 17, 2021 at 9:44

Sones1 · Accepted Answer · 2021-06-17 15:38:16Z

If you want that this media queries will be available only in mobile devices, i would use JS to identify the device and load the css queries file. For example, something like this:

const ifIsMobile = { // detect the mobile devices
Android: function() {
    return navigator.userAgent.match(/Android/i);
},
BlackBerry: function() {
    return navigator.userAgent.match(/BlackBerry/i);
},
iOS: function() {
    return navigator.userAgent.match(/iPhone|iPad|iPod/i);
},
Opera: function() {
    return navigator.userAgent.match(/Opera Mini/i);
},
Windows: function() {
    return navigator.userAgent.match(/IEMobile/i);
},
any: function() {
    return (ifIsMobile.Android() || ifIsMobile.BlackBerry() || ifIsMobile.iOS() || ifIsMobile.Opera() || ifIsMobile.Windows());
}};




const loadMobileCss = () => { // add the link tag to load mobilestyles.css
                const linke = document.createElement("link");
                linke.rel = "stylesheet";
                linke.href = "mobilestyles.css";
                document.getElementsByTagName("head")[0].appendChild(linke);
            }


 if (ifIsMobile.any()) loadMobileCss(); //  if the device is mobile, load mobilestyles.css with the function loadMobileCss()

You have to put this code in the head of your web to make this work.

Weyers de Lange · Accepted Answer · 2021-06-17 11:26:04Z

0

You can try to use a container with a fixed size if you would like to use it for coding purposes. personally i would use a mobile environment or flex/responsive coding.

<!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>

<div style="width: 415px"class="w3-container w3-red">
  <p>This is a container with max output of 415px. this size can not be exeeded.</p>
</div>


</body>
</html>

answered Jun 17, 2021 at 11:26

Weyers de Lange

2902 silver badges11 bronze badges

2 Comments

Franco Over a year ago

Will the Div only show on devices that are smaller than 415px?

Weyers de Lange Over a year ago

no the div will show on devices bigger that 415px but can not stretch or grow larger than 415px.

Collectives™ on Stack Overflow

How to disable CSS media queries when in desktop mode

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related