Не применятся стиль к изображению при @media запросах, !important так же не срабатывает

Question

Не применятся стиль к изображению при @media запросах, !important так же не срабатывает. Поясните пожалуйста где ошибка? Я не опытный разработчик, поэтому буду благодарна помощи)

// page 404
.page-404 {
    padding: 110px 0 120px;
    &__inner{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    &__content{
        max-width: 570px;
        width: 100%;
    }
    &__title{
        color: #28384f;
       margin-bottom: 40px;
       @extend %roboto-700;
       font-size: 48px;
        line-height: 52px;
    }
    &__text{
       margin-bottom: 55px;
        max-width: 470px;
    }
    &__link{
      background-color: $accent;
       text-transform: uppercase;
       color: #fff;
        padding: 14px 35px;
        @extend %roboto-400;
        box-shadow: 0px 5px 25px 0px rgba(254, 62, 87, 0.35);
    }
}

@media (max-width: 1230px) {
    .page-404 {
        &__img{
            width: 40%;

        }
    }
}

@media (max-width: 992px) {
    .page-404 {
        &__img{
            display: none;
        }
    }
}

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/404.min.css">
    <link rel="stylesheet" href="css/style.min.css">
</head>

<body>

    {% include 'app/module/_header/_header.html' %}

<main class="main">
    <section class="page-404">
        <div class="container">
            <div class="page-404__inner">
                <div class="page-404__content">
                    <h2 class="page-404__title">
                        OPPS! Page Not Found!!
                    </h2>
                    <p class="page-404__text">
                        We,re sorry but we can’t seem to find the pages you request. This might be because you have typed the web address not find incorrectly.
                    </p>
                    <a class="page-404__link" href="#">BACK TO HOME</a>
                </div>
                <img class="page-404__img" src="images/404.png" alt="page-404 images">
            </div>
        </div>
    </section>
</main>

    {% include 'app/module/_footer/_footer.html' %}





    <script src="js/main.min.js"></script>
</body>

</html>

Answer 1

Попробуйте обернуть фото в контейнер и этому контейнеру уже давать стиль

 HTMl
 <div class="foto-hole">
    <img class="page-404__img" src="images/404.png" alt="page-404 images">
 </div>
 CSS
  .foto-hole{
    width:300px; //условно
    height:300px;
  }
  .page-404__img{
    width:100%; //картинка будет занимать вс] пространство контейнера
    height:100%;
    object-fit:cover;
   }
    @media (max-width: 1230px) {
        .foto-hole{
            width:40%;//так как фото занимает все пространство то и оно 
            //уменьшится
        }
      }

Answer 2

источник

в вашем коде css, используется & , это SCSS/LESS

Таким образом, мы меняем, и это дает нам следующее

@media (max-width: 1230px) {
  .page-404__img {
    width: 40%;
  }
}

@media (max-width: 992px) {
  .page-404__img {
    display: none;
  }
}

<img class="page-404__img" src="images/404.png" alt="page-404 images">

БЛОГ НА HUSL

Не применятся стиль к изображению при @media запросах, !important так же не срабатывает

Ответы (2 шт):