CODEWITHSUNDEEP
htmlcssmedia-queriesstylesheet
user2548614
user2548614

Reputation:

@media query is not working with main style sheet, linking to it as an external sheet works

I'm trying to condense my external css media query style sheet and my main css stylesheet.

When I link to the external style sheet, the media query works properly.. but after I tried to add the code to my main css stylesheet, it no longer works.

I've been looking at a tutorial and downloaded some files, but I'm still stumped.

I linked to my external media query css sheet by linking it like this:

<link rel='stylesheet' media='screen and (min-width: 700px) and (max-width: 2500px)' href='css/r_700.css' />

This worked fine.

Here is the header I have for my page at the moment:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Responsive Tester Page</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel='stylesheet' type='text/css' href='css/style.css' media='all' />

    <!--   
    <link rel='stylesheet' media='screen and (min-width: 700px) and (max-width: 2500px)' href='css/r_700.css' />
     -->

</head>

Here is the code in the external r_700 style sheet:

body {
    background-color:#00F;
    background-image:none;
    padding:0;
    margin:0;
    }

Here is the code in the main style.css sheet (that I can't get to work):

@media all and (min-width: 700px) {
        body {
            background-color:#00F;
            background-image:none;
            padding:0;
            margin:0;
            }
    }

The @media is the very last bit of lines in the main stylesheet, so I know nothing is writing over it.

I know it has to be something simple, like screwed up syntax or something like that. I feel really dumb that I can't get this silly thing to work.

Does anyone mind helping me out? Thanks.

Upvotes: 0

Views: 895

Answers (1)

Liftoff
Liftoff

Reputation: 25392

I think it is because the code that you are replacing in your media query is the exact same as the code in your default CSS:

Default:

body {
background-color:#00F;
background-image:none;
padding:0;
margin:0;
}

vs:

@media all and (min-width: 700px) {
    body {
        background-color:#00F;
        background-image:none;
        padding:0;
        margin:0;
        }
}

You're not changing anything, so the page looks the same...

Upvotes: 1

Related Questions