CODEWITHSUNDEEP
javascripthtmlcss
Franco
Franco

Reputation: 868

How to disable CSS media queries when in desktop mode

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.

Upvotes: 0

Views: 1225

Answers (2)

Sones1
Sones1

Reputation: 133

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.

Upvotes: 1

Weyers de Lange
Weyers de Lange

Reputation: 290

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>

Upvotes: 0

Related Questions