Don't undertand why media query isn't working

So basically I was working on the adaptable part of my code and everything was working smootly with my media query and everything else, suddenly it stopped working(? I don’t know what’s wrong or why is it happening now, I’m guessing there’s some mistake I can’t see with my css but I can’t find it.

*{

margin: 0;
padding: 0;
box-sizing: border-box;
max-height: 2080px;

}

body{background-image: url(…/img/aaa.png);
background-repeat: no-repeat;
background-size: contain;
z-index: 2;
max-height: 2080px;
background-color:pink;
}

footer{ background: #111;
left: 0; bottom: 0;
display: flex;
flex-wrap: wrap;

z-index: 2;
clear: both;
position: absolute;
width: 98%;
height: 10%;
margin-bottom: -100%;
margin-left: 1%;
margin-right: 1%;
display: flex;
align-items: center;
}

footer a{

color: white;
text-decoration: none;
font-family:monospace;
padding-left: 8%;
padding: 5px 14px;

}

.todo{ display: flex;
flex-direction: row;
flex-wrap: wrap;

}

.fondo{

background: #FFF;

height: 2512px;
width: 98%;

margin-left: 1%;
margin-right: 1%;

margin-top: -23%;
z-index: 1;

}

.nombre h1{
margin-top: -38%;
font-family: cursive;
margin-left: 1%;
color: white;
font-size: 230%;
text-shadow: 5px 4px lightblue;
z-index: 2;

}

.menu{

background: #fff;
height: 60px;
width: 100vw;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 5px 0 10px rgba(0,0,0, .5);

}

.logo{

color: pink;
font-family: "Comic Sans Ms", cursive;
font-weight: bold;
font-size: 240%;
margin-left: 2%;
text-shadow: 2px 3px  lightblue;

}
.items{

display: flex;
list-style: none;
margin-right: 6%;

}

.items li{

border-radius: 1%;
margin: 0 16px;

}

.items li a{

text-decoration: none;
font-size: 110%;
display: block;
color: lightblue;
font-family: cursive;

}

li a:hover{

background-color:lightcyan;
padding: 5px;
transition: .4s;

}

.bts-menu{

margin-right: 10%;
font-size: 150%;
color: pink;
cursor:pointer;
display: none;

}

ul.show{

top: 65px;

}

.img-frontal {

margin-top: 10%;
margin-left: 18%;
z-index: 2;
max-width: 100%;
width: 60%;

}

.img-frontal h1{
position: absolute;
font-family:“Comic Sans Ms”, cursive;
font-size: 590%;
color: white;
margin-left: 14%;
margin-top: -27%;
z-index: 2;

}

.img-frontal p{
position: absolute;
color: black;
z-index: 2;
margin-left: 20%;
font-family: “Comic Sans ms”, cursive;
color: white;
margin-top: -25%;
font-size: 223%

}

.front{

max-width: 80%;
margin-left: 15%;
margin-top: 10%;

}

.back-content h1{
margin: auto;
margin-left: 15%;
font-family: cursive;
margin-top: 34%;
position: absolute;
font-size: 690%;
color: pink;
letter-spacing:20px;
text-shadow: 5px 4px lightblue;

}

.back-content img{
margin: auto;
width: 50%;
height: 30%;
margin-top: 50%;
margin-left: 3%;
border-style:dashed;
border-color: pink;

}

hr.someClass {
background-color: lightblue;
width: 70%;
height: 5px;
position: absolute;
margin-top: 43%;
margin-left: 2%;
z-index: 2;
}

.text1 h1{

color:lightblue;

z-index: 2;
margin-top: -34%;
margin-left: 58%;
font-size: 450%;
font-family: "Comic Sans Ms", cursive;
text-shadow: 5px 4px  pink;

}

.text1 p{

color:black;

z-index: 2;
margin-left: 55%;
font-size: 150%;

}

.bubbly-button{

font-family: ‘Helvetica’, ‘Arial’, sans-serif;
display: inline-block;
font-size: 0.6em;
padding: 1em 2em;
margin-top: 2%;
margin-bottom: 60px;
appearance: none;
border-radius: 4px;
border: none;
background-color: deeppink;
color: white;
cursor: pointer;
position: absolute;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5)

}

.cajas{

max-width: 1100px;
margin: 0 auto;
text-align: center;
padding: 43px;
margin-top: 13%;
}

.cajas h1{

font-size: 120%;
margin: 0 0 26px 0;
letter-spacing: 1px;

}
.contenido1{

display: flex;
flex-wrap: wrap;
flex: 1;
margin: 16px;
padding: 33px;
border: 3% solid black;
border-radius: 4px;
transition: all .3s ease;
}

.otros{

display: flex;
align-items: center;

}

.card-1, .card-2{

margin-right: 1%;

}

.card-1, .card-2, .card-3 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-2:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-3:hover {box-shadow: 0 14px 28px
rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.button2{

font-family: ‘Helvetica’, ‘Arial’, sans-serif;
display: inline-block;
font-size: 0.6em;
margin-left: -2%;
padding: 2em 3em;
border-style: dashed;
appearance: none;
border-radius: 4px;
border: none;
background-color: deeppink;
color: white;
cursor: pointer;
position: absolute;
box-shadow: 0 2px 25px rgba(255, 0, 130, 0.5)}

As I said it was working fine with the media and then it didn’t, the code is kind of long so yeah

@media screen and (max-width:952px){
.logo{

          font-size: 170%;
          padding-left: 5%; 
      }

      .items{
          
          font-size: 80%;
      }

    .img-frontal p{
        
        font-size: 110%;
        top: 60%;
      }
      
      .img-frontal h1{
        
        font-size: 310%;
        top: 63%;
      }
      
      .back-content h1{
          
          font-size: 500%;
          margin-top: 30%;
      }
      
      .text1 h1{
          
          font-size: 320%;
          margin-top: -36%
      }
      
      
      
      .text1 p{
          
          font-size: 80%;
      }
      
      .fondo{
          
          height:1485px; 
      }
      
      .cartas{
          
          width: 30%;
          height: 10%;
          margin-left:1%;
          margin-right: 2%;
          position: relative;
          flex-direction: row;
      }
      
      footer{
          
          margin-bottom: -105%;
      }

}

  @media screen and (max-width:858px){ 
      .menu{
          
          height:65px;
      } 
     
     .bts-menu
     {
         
        display: inline-flex;
     }
     
     .items
        {
            
            position: fixed;
            width: 100vw;
            height: calc(100%-65px);
            background: darkgray;
            top: -100vh;
            text-align: center;
            transition: all .4s;
            flex-direction: column;
     }

     .item li

     {
         
         margin: 30px 0 0;
         line-height: 30px;
     }
     
     .items li a

     {
         
         font-size: 190%;
         color: #fff;
         font-weight: bold;
     }
     
     .img-frontal p{
        
        font-size: 100%;
        top: 60%;
      }
      
      .img-frontal h1{
        
        font-size: 290%;
        top: 60%;
      }
     
     .back-content h1{
          
          font-size: 430%;
          margin-top: 30%;
         
      }
     
     .text1 h1{
          
          font-size: 280%;
          margin-top: -36%
      }
      
      
      
      .text1 p{
          
          font-size: 77%;
      }
     
     .cartas{
          
          width: 30%;
          height: 10%;
          margin-left:1%;
          margin-right: 2%;
          position: relative;
          flex-direction: row;
      }

.fondo{

          height:1385px; 
      }

.contenido1 h3{

          font-size: 85%;
      }
     
     .button2{
          
          margin-left: -6%;
      }

}

@media screen and (max-width:858px) and (orientation:landscape){
.items li{
margin: 5px 0 0;

      }
 
 .items {

overflow: scroll;
height: calc(100%-65px);
}

  }

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

     .img-frontal p{
        
        font-size: 80%;
        top: 44%;
        
      }
      
      .img-frontal h1{
        
        font-size: 230%;
        top: 47%;
         
      }
     
     .back-content h1{
          
          font-size: 370%;
          margin-top: 30%;
         
      }
     
     .text1 h1{
          
          font-size: 230%;
          margin-top: -36%;
         margin-top: -35%;
      }
      
      
      
      .text1 p{
          
          font-size: 68%;
          margin-top: -3%;
      }
     
     .contenido1{
          
          padding: 15%;
      }

.fondo{

          height:1185px; 
      }

.contenido1 h3{

          font-size: 70%;
      }
     
     .button2{
          
          margin-left: -6%;
      }
     footer{
          
          margin-bottom: -99%;
      }

}

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

     .img-frontal p{
        
        font-size: 85%;
        top: 92%;
      }
      
      .img-frontal h1{
        
        font-size: 248%;
        top: 91.5%;
      }
     
     .back-content h1{
          
          font-size: 420%;
          margin-top: 32%;
         
      }
     
     .text1 h1{
          
          font-size: 260%;
          margin-top: -33%;
         
      }
      
      
      
      .text1 p{
          
          font-size: 80%;
          margin-top: -1%;
      }
     
     .contenido1{
          
          padding: 15%;
      }

.fondo{

          height:1294px; 
      }

.contenido1 h3{

          font-size: 70%;
      }
     
     .button2{
          
          margin-left: -6%;
      }
     footer{
          
          margin-bottom: -110%;
      }

}

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

     .img-frontal p{
        
        font-size: 50%;
        top: 92%;
      }
      
      .img-frontal h1{
        
        font-size: 248%;
        top: 91%;
      }
     
     .back-content h1{
          
          font-size: 400%;
          margin-top: 32%;
         
      }
     
     .text1 h1{
          
          font-size: 230%;
          margin-top: -33%;
         
      }
      
      
      
      .text1 p{
          
          font-size: 40%;
          margin-top: -1%;
      }
     
     .contenido1{
          
          padding: 15%;
      }

.fondo{

          height:1294px; 
      }

.contenido1 h3{

          font-size: 70%;
      }
     
     .button2{
          
          margin-left: -6%;
      }
     footer{
          
          margin-bottom: -110%;
      }

}

Hi, @haidax,
Welcome to Freecodecamp forum.
could you send me one complete file contains all of your style?
your post seems little complex.

If you’re talking about my complete css style file I posted everything from it in there. If you’re talking about another thing I’m not understanding(?

yes, you did, but it’s broke down to several parts. could you merge them to one file?

Hi @haidax!

It would easier if you sent us link to codepen or something similar. It is hard to see what the problem is though a txt file.