Мой медиа-запрос в S CSS не работает должным образом - PullRequest
0 голосов
/ 23 марта 2020

вот мой код:

.showcase {
  width: 100%;
  height: 93vh;
  position: relative;
  background-image: url("https://i.ibb.co/vXqDmnh/background.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: rgba(0, 0, 0, 0.6);
    box-shadow: inset 120px 100px 250px black, inset -120px -100px 250px black;
  }
}

@media only screen and (max-width: 960px) {
  .showcase {
    height: 70vh;
  }
  .hide-sm {
    display: none;
  }
  .showcase-top img {
    top: 30%;
    left: 5%;
    transform: translate(0);
  }

  .showcase-content {
    h1 {
      font-size: 3.5rem;
      line-height: 1;
    }
  }
}

Здесь только класс (.hide-sm) работает, но другие классы не работают. Я пытался увидеть, используя chrome dev инструменты, но это показывает, что оригинальный стиль не изменился. Может кто-нибудь помочь мне разобраться с этой проблемой?

...