Device-Specific @media queries don't seem to work

Question

Hello everyone

I'm using a 'main' media query to target all major changes form desktop to mobile with this (scss) :

// media breakpoint variables
$mob-exslim: 320px;
$mob-slim: 360px;
$mob-regular: 375px;
$mob-medium: 390px;
$mob-plus: 414px;
$mob-large: 428px;

@media screen and (min-width: $mob-exslim) and (max-width: 1020px) {
  .contact-indicator {
    display: none;
  }
  .hero-wrap {
    margin-top: 70px;
    overflow-x: hidden;
    // disable left side of the hero
    .left-side {
      display: none;
      .main-img {
        display: none;
      }
      .hero-arrow {
        display: none;
      }
    }

    // disable the right side of the hero
    .right-side {
      display: none;
      .main-heading {
        display: none;
      }
      .hero-descrip {
        display: none;
      }
      .button-wrap {
        display: none;
        .hero-btn {
          display: none;
        }
        .btn-arrow {
          display: none;
        }
      }
    }
    .mobile-title {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .flex-left {
        min-width: 100vw;
        width: 100vw;
        max-width: 100vw;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        .mobile-h2 {
          position: absolute;
          right: 19px;
          font-size: 33px;
          font-weight: 300;
          text-align: right;
          max-width: 298px;
          width: 298px;
          min-width: 298px;
          margin: 8px 0 0 0;
          padding: 0;
        }
        .mobile-hero-img {
          max-width: 355px;
          margin-right: -140px;
        }
      }
      .mobile-hero-p {
        margin-left: -45px;
        font-size: 15.5px;
        margin-top: 55px;
        max-width: 272px;
        line-height: 26px;
      }
      .mobile-hero-btn {
        margin-top: 45px;
        min-width: 191px;
        max-width: 191px;
        min-height: 53px;
        height: 53px;
        max-height: 53px;
        border-radius: 14.5px;
        background-color: $grid-black;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-decoration: none;
        cursor: pointer;
      }
    }
  }
}

And then, when I'm trying to be more specific with the viewports like this:

// 375PX WIDTH & 667PX HEIGHT -- iPHONE 6,7,8
@media screen and (min-width: $mob-regular) and (max-width: 389px),
  screen and (min-height: 667px) and (max-height: 667px) {
  .hero-wrap {
    margin-top: 65px;
  }
  .mobile-title {
    .mobile-hero-p {
      margin-top: 40px;
    }
  }
}


// 375PX WIDTH & 812PX HEIGHT -- iPHONE X, XS, 11 PRO
@media screen and (min-width: $mob-regular) and (max-width: 389px),
  screen and (max-height: 812px) {
  .mobile-title {
    .mobile-hero-p {
      margin-top: 70px;
    }
  }
}

The last two media queries don't seem to get registered.

If it helps, all the code is available on github : https://github.com/DesignedByNino/gridbase-studio in the 'src' folder under 'css/index.scss'.
This project uses vue.js - but it's not exactly relevant to the question, just so you know if you take a look.

Thank you in advance for all the answers!

Answer 1

After some time in Chrome Dev Tools, I found out that the styles I was trying to target with the device specific media queries were not registering because I was not specific enough in SCSS with the last media queries.