why the mobile media query is not working on mobile

Question

I know this is a stupid question, but I'm having trouble with the small screen media query. I gave the image a class, so it should work. Also, when I tried to add an id, it didn't work, so is there something wrong with my code or the media query thing? Any assistance or advice would be greatly appreciated.

@media only screen and (max-width : 600px){

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

}

}

.mondaycont{

  width: 84%;
}

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

}

.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>

The definition *inside* your media query is identical to the one *outside*. How does that make any sense? — connexo, Feb 11 '22 at 09:52
@connexo sorry i did change the values even tho its not working i wanted to have different margin and width values — , Feb 11 '22 at 10:01

connexo · Accepted Answer · 2022-02-11T10:02:51.930

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>

why the mobile media query is not working on mobile

1 Answers1