css media query asking user to rotate device orientation not working

I have used a css media query so that it prompts the user to tilt their device , if they are in portrait mode and I want that prompt (div tag) to go away when in landscape . This is for mobile devices basically

here's the code

 .container {
    position: relative;
    width: 640px;
  }



  @media (orientation: landscape){
    .container{display: block;}
    .prompt{display:none;} 
  }
  
  @media (orientation: portrait){
    .container{display: none;}
    .prompt{display:block;} 
  }

  .prompt{
    position: relative;
    width: 640px;
    background-color: #df0f00;
  }