CODEWITHSUNDEEP
cssmedia-queries
Kisho
Kisho

Reputation: 327

Why aren't my CSS media queries responding based on my criteria?

I have the below media declarations in my 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%;
    }
}

And the content is just displaying as it should under 425px and over 768px. The issue is that what I have specified to appear in (min-width: 768px) does not do so in between 425px and 768px. Can anyone see where the issue might be? :/

Upvotes: 0

Views: 33

Answers (1)

ellitt
ellitt

Reputation: 833

It sounds like you've answered your own question.

If the minimum width of the device is 768px to run some of the CSS and the maximum width of a device is 425px to run the other CSS, then there isn't going to be any CSS to run for devices between 425px and 768px.

Sounds like you may not need the min-width query at all.

Upvotes: 2

Related Questions