'why the mobile media query is not working on mobile [duplicate]

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/[email protected]/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>
cssmedia-queries


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions