How to disable CSS media queries when in desktop mode

Issue

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.

Solution

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.

Answered By - Sones1