CODEWITHSUNDEEP
htmlcssmedia-queries
Tim T
Tim T

Reputation: 333

Media queries not working as they should

So, Ive come across a problem that I can't seem to figure out the cause of.

I have a few CSS files:

1) styles.css - contains most of the webpage's styling.

2) overlay.css - contains the styling for my overlay.

3) media.css - contains all the media queries.

So far, everything works great and my page acts responsively. However, for some reason, I can't make media queries work with my overlay. Here is my CSS for the overlay in the file overlay.css:

#aboutus {
    position: fixed;
    background-color: white;
    left: 50%;
    top: 50%;
    width: 800px;
    height: 450px;
    margin-left: -400px;
    margin-top: -225px;
    border-radius: 20px;
    z-index: 9999;
}

Here is my media query in media.css:

@media screen and (max-width: 700px) {
    #aboutus {
        background-color: red;
    }
}

At the moment this query has no effect whatsoever. The weird thing is, if I put the query under the code in overlay.css instead, it does work 100%.

Why is this so?

Thanks.

Upvotes: 2

Views: 74

Answers (1)

slashsharp
slashsharp

Reputation: 2833

How do you load your css? Your media css should be on last after styles & overlay.css

Upvotes: 3

Related Questions