Whats Wrong with The Media Query

Why are my CSS3 media queries not working on mobile devices?

All three of these were helpful tips, but it looks like I needed to add a meta tag:

<meta content="width=device-width, initial-scale=1" name="viewport" />

Now it seems to work in both Android (2.2) and iPhone all right...

What is wrong with media queries on different selectors?

This is because of the CSS specificity rule .wrapper .inner .left .text .sample-text this class has more specificity value than .sample-text

.wrapper .inner .left .text .sample-text {
    color: red;
}

@media screen and (max-width: 800px) {
    .wrapper .inner .left .text .sample-text  {
        color: green;
    }
}

FYR check this link
https://www.w3schools.com/css/css_specificity.asp

Problem with media queries not working in css

A @media query should be a top level statement, that contains CSS rules. You can't nest it inside a CSS rule.

Change it to this, and see if it works:

.newestpost {
    line-height: 20px;
    height: 400px;
    display: ;
    width: 600px;
    float: left;
    margin: 30px 50px;
}

@media screen and (min-width: 1312px) and (max-width: 3000px)   
{
    .newestpost {
        width: 100%;
        float: left;
        margin: ;
    }
}

why the mobile media query is not working on mobile

Your media query is followed by a declaration that applies to all resolutions, overwriting your media query width definition. Media queries do not affect specificity, so the normal "last rule wins" applies.

Exchange the position of these two rules:

.mondaycont .monday {
  position: relative;
  width: 40em;
  margin-top: 20px;
}

@media only screen and (max-width: 600px) {
  .mondaycont .monday {
    position: relative;
    width: 20em;
    margin-top: 10px;
  }
}

.mondaycont {
  width: 84%;
}

.mondaytext {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  color: white;
  margin-top: 50px;
  position: relative;
}

.mondaytextbold {
  font-family: 'Inter', sans-serif;
  font-weight: bold;
  color: white;
  margin-top: 10px;
  position: relative;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ERROR 404</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="./css/style.css">
</head>

<body>
  <style>
    body {
      background-color: #262626;
    }
  </style>
  <div class="container text-center">
    <p class=" mondaytext">This page feels like a monday...</p>
    <a href="./index.html">
      <p class=" mondaytextbold">Go Home</p>
    </a>
  </div>

  <div class="container-fluid mondaycont text-center">
    <img class="img-fluid monday" src="./images/ERROR404.png" alt="404"></div>
</body>

</html>

whats wrong with the media query?

The unknown media feature that the example is referring to is max-weight. Once that is encountered, the 3kg value is no longer relevant since it will never be applicable anyway, because the browser won't know what to do with max-weight in the first place. So it skips that media query altogether, leaving you effectively with this:

<link rel="stylesheet" media="not all, (color)" href="example.css" />

Which is the same as this:

<link rel="stylesheet" media="(color)" href="example.css" />

Media features are described in another section. The first sentence states:

Syntactically, media features resemble CSS properties: they have names and accept certain values.

So it only makes sense to describe error handling of the media features themselves first, then handling of their values.

CSS Media Query Won't Work

I always call mine when I link the CSS in the head of the HTML.

An example from a current page I'm working on:

<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 320px) and (max-device-width: 500px)" href="css/mobile.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 501px)" href="css/main.css" />

This selects the CSS doc that will be loaded right from the start instead of selecting styles after the CSS document is loaded (reduces number of HTTP requests)

When doing this within the CSS document itself, you should generally replace max-device-width with max-width.

media query was working fine but suddenly doesn't work anymore

The problem is an invisible special character inserted into your code.

It's making the declaration invalid, which calls CSS error-handling into play, and the rule is ignored.

If you copy and paste the code into Notepad, you'll see it.

Sample Image

In computer science we call this a focused, non-repeating phantasm, or class-5 free roaming vapor... real nasty one, too! :-)

The simple solution is to just delete that media query and re-type it.

Media Query Order not working, need to understand order rules

Your html/browser/etc.. read the css like a batchfile, from beginning to the end.

the last hit/match in a css file always overwrites the previous one

if you got this and your screen size is 700px:

Order 1:

@media screen and (max-width:767px){}
@media screen and (max-width:992px){}

you will get the media of max-width:992px now

Order 2:

@media screen and (max-width:992px){}
@media screen and (max-width:767px){}

you will get the media of max-width:767px now

This is your correct order:

@media screen and (max-width:1170px){}
@media screen and (max-width:1000px){}
@media screen and (max-width:992px){}
@media screen and (max-width:767px){}
@media screen and (max-width:632px){}
@media screen and (max-width:580px){}
@media screen and (max-width:480px){}

I make the example with out the min media

If your size is now 1171px your html/browser/etc.. will take/read the standard style of your css(outside the media queries), but again from the beginning to the end.

Check this too:

Responsive Web Design - Media Queries

Using media queries