Changing CSS based on screen size not working
# 🤝help
Copy code
@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
Havent solved it completely yet however I've found that having min-width in my CSS leads to it being ignored while max-width isn't