@media only screen and (min-width: 601px) {
  .bpw-layout {
    width: 360px;
    border: 1px solid #d3d3d3;
    height: 70vh;
    border-radius: 10px;
    right: 10%;
    bottom: 5%;
  }
}

@media only screen and (max-width: 600px) {
  .bpw-layout {
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    border-radius: 0;
  }
}

I have tried multiple ways writing this, however, the second declared CSS always overrides the initial one (i.e. height will always be 100% in this case regardless of screen size). meta tag in head content="minimum-scale=1, initial-scale=1, width=device-width" so this is not the issue. Any tips?

did you end up figuring this out? having the same issue