Media-queries not working on Sass project

I am working on a Sass project and everything worked properly, but media queries are not working. I tried adding them at the bottom of the document, adding in the chain of labels, having more specificity than the normal chain and nothing is working. Do you know what the problem could it be?

Here is what I did:

Breakpoints:

$mobile-breakpoint: 600px;
$laptop-breakpoint: 922px;

In this case is applying the media query even when the width is less than 922px:

img{
    height: 5vw;
    margin: 3vh 4vh 4.6vh 3vh;
    @media(min-width: $laptop-breakpoint){
        height: 4vw;
    }
}

The code after being coverted to CSS:

.main-header .header-logo-search a img {
  height: 5vw;
  margin: 3vh 4vh 4.6vh 3vh;
}
@media (min-width: 922px) {
  .main-header .header-logo-search a img {
    height: 4vw;
  }
}

In this case, it does not apply the media query:

input{
      @include search();
      width: 30vw;
      box-sizing: border-box;
      padding: 0 1.5vw;
      font-size: 1.2rem;
      background-color: $snow;
      border-radius: 5px 0 0 5px;
      @media(max-width: 600px){
      display: none;
}

The code after being coverted to CSS:

.main-header .header-logo-search form input {
  height: 3.5rem;
  line-height: 3.5rem;
  border: none;
  margin: auto 0;
  width: 30vw;
  box-sizing: border-box;
  padding: 0 1.5vw;
  font-size: 1.2rem;
  background-color: #FFF9FB;
  border-radius: 5px 0 0 5px;
}
@media (max-width: 600px) {
  .main-header .header-logo-search form input {
    display: none;
  }
}

Thanks in advance

1 answer

  • answered 2022-05-06 17:36 Anurag Das

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    

    Without a viewport meta tag, your site will be rendered into the device's default virtual viewport.

How many English words
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
Powered by Examplum