Why doesn't my @media screen save

Question

I have been stuck with this problem or the past hour and its really annoying me. I am making my website responsive to different screen sizes every time I write the code for it, I test it and it works. Then if I close the browser and reopen or reopen the code editor (brackets) the page loads like nothing happened. So I have re write everything again. This problem keeps recurring and I don't know why it wont just save. I can place my code since its over 2000 lines and I have just moved on to the responsive side of the site.

but I have applied this to every html file.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

and I have used this as my starting statement for the @media in the css

@media screen and (max-width:)

CSS

header img{
    margin-left: auto;
    margin-right: auto;
    display: block;
}

footer img{
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    display: block;
    bottom: 5%;
    left: 40%;
    right: 40%;
}

.logo img{
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    display: block;
    bottom: 2%;
    left: 40%;
    right: 40%;

}

.home img{
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    display: block;
    bottom: 5%;
    left: 40%;
    right: 40%;
    width: 120px;
}


.socialmedia-twitter img {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    display: block;
    bottom: 5%;
    left: 20%;
    right: 40%;
}

.socialmedia-facebook img {
    position:fixed;
    margin-left: auto;
    margin-right: auto;
    display: block;
    bottom: 5%;
    right: 20%;
    left: 40%;
}

@media screen and (max-width: 640px){

    header img{
        margin-left: auto;
        margin-right: auto;
        display: block;
    }

    footer img{
        position:fixed;
        margin-left: auto;
        margin-right: auto;
        display: block;
        bottom: 5%;
        left: 40%;
        right: 40%;
    }

    .logo img{
        position:fixed;
        margin-left: auto;
        margin-right: auto;
        display: block;
        bottom: 2%;
        left: 40%;
        right: 40%;
    }

    .home img{
        position:fixed;
        margin-left: auto;
        margin-right: auto;
        display: block;
        bottom: 5%;
        left: 40%;
        right: 40%;
        width: 120px;
    }


    .socialmedia-twitter img {
        position:fixed;
        margin-left: auto;
        margin-right: auto;
        display: block;
        bottom: 5%;
        right: 50%;

    }

    .socialmedia-facebook img {
        position:fixed;
        margin-left: auto;
        margin-right: auto;
        display: block;
        bottom: 5%;
        right: 20%;
        left: 50%;
    }

}

That so strange, might sound like a stupid question but is the media query place below the rest of the css because your queries like good to me — Matt Hammond, Jun 13 '15 at 22:54
yep it is, its so annoying i have re-write and then when im done it will happen again — Gusic industry, Jun 13 '15 at 22:57
Are you using brackets live preview or opening the .html file from the folder? — Matt Hammond, Jun 13 '15 at 22:58
i did and i just checked the normal file and it still doesnt work. — Gusic industry, Jun 13 '15 at 23:00
I honestly don't know the problem as the the queries are all good, it must be some code messing with them. You could try linking a new style sheet below the rest of the css like - that way we can work out whether its the saving or the code itself — Matt Hammond, Jun 13 '15 at 23:21
thats so strange, i would make a new css file and save it separately to stop your constantly re-writing the code — Matt Hammond, Jun 13 '15 at 23:25
i had a file but i never really used it. I just linked it to the html but didnt use it. — Gusic industry, Jun 13 '15 at 23:27
here `@media screen and (max-width:) header img{` did you open curly brackets like this: `@media screen and (max-width:) { header img{` ? — dippas, Jun 14 '15 at 00:18

score 0 · Answer 1 · edited May 23 '17 at 12:14

There are lots of reasons why this could have happen, but i think it is the obvious one. if you reach a sertan width @media screen and (max-width: 640px) this css wil be enabled, in order to work his way back you need to define the width your working in. While working on the design, it is also recommended to turn of any cache methods.

So for this to work proberly you will prob need three @media screen properties.

Examples

Why doesn't my @media screen save

1 Answers1

Linked