Inconsistency in my css

I have a problem with my specific css with two @media, because only one appears, and the one that appears has a different @media height than the original.

original CSS fragment

@media (max-width: 680px) {
  .imagenes-container{
    flex-direction: column;
    height: 180vh;
  }

    @media (max-height: 540px) {
      .imagenes-container{
        height: 220vh;
      }
  }

}

CSS fragment that the page gives me

@media (max-width: 680px) {
  .imagenes-container{
    flex-direction: column;
    height: 250vh;
  }
  
}

The name of my site is “wondrous-fudge-22aeca”.
you can check my github repository: Aprendiendo-CSS/2.-pokemons at master · LuisFassio/Aprendiendo-CSS · GitHub

You’ve nested the @media rules. Try unnesting them

media (max-width: 680px) {
  .imagenes-container{
    flex-direction: column;
    height: 180vh;
  }
}
@media (max-height: 540px) {
  .imagenes-container{
    height: 220vh;
  }
}

Nesting @media is technically supported by all modern browsers (see MDN @media.)

Note: This is nothing to do with Netlify.

I already made the change as you suggested and it is working well, the strange thing is that before I did it very similar without nesting, and the same thing happened, but now it is working, thank you for your attention.

final css

@media (max-width: 680px) {
  .imagenes-container{
    flex-direction: column;
    height: 180vh;
  } 

}

@media (max-width: 680px) and (max-height: 540px) {
  .imagenes-container{
    height: 220vh;
  }
}

Hey thanks for updating us with your final CSS, I’m glad dig was able to get you a resolution!