Почему мои CSS медиа-запросы не отвечают на основе моих критериев? - PullRequest
Новая
       16

Почему мои CSS медиа-запросы не отвечают на основе моих критериев?

0 голосов
/ 24 апреля 2020

В моих CSS

@media all and (max-width: 425px) {
    .Home-image {
        display: none;
    }

    .Home-col-1-1 {
        justify-content: space-around;
        background-color: rgba(255, 255, 255, 0.897);
        padding: 2rem;
    }

    .Home-col-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: url('../Home/cocktail-illustration.jpg');
        background-size: contain;
        background-position-y: 110%;
        background-color: #52b6d0;
    }
}

@media all and (min-width: 768px) {
    .Home-col-1 {
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: blanchedalmond;
    }

    .Home-image {
        background-image: url('../Home/cocktail-illustration.jpg');
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #52b6d0;
        background-position-y: 50%;
        background-position-x: 20%;
    }
}

есть следующие медийные объявления, а содержимое отображается так, как оно должно быть при 425px и более 768px. Проблема в том, что то, что я указал для отображения (min-width: 768px), не выполняется между 425 и 768px. Кто-нибудь может увидеть, где проблема может быть? : /

1 Ответ

2 голосов
/ 24 апреля 2020

Похоже, что вы ответили на свой вопрос.

Если минимальная ширина устройства составляет 768 пикселей для запуска некоторых из CSS, а максимальная ширина устройства составляет 425 пикселей для запуска других CSS, тогда не будет никаких CSS для устройств между 425px и 768px.

Похоже, вам вообще не нужен запрос минимальной ширины.

...