Search code examples
htmlcssmedia-queries

Why is @media changing body properties?

I really can not understand why if I use:

@media screen and (max-width: 720px)

The body changes height and margin. Look at this samples:

1) Without @media: http://jsfiddle.net/Clear/xrcxsmpp/

2) With @media: http://jsfiddle.net/Clear/xrcxsmpp/1/

As you can see, I tried also to change the body properties as:

body {
    margin: 0 !important;
    height: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

Someone who has some idea?

Solution

  • Your semi-colon at the end of your media query is invalidating the body selector!

    Just remove that so you only have the closing brace.

    EDIT

    Semi colons in CSS are only valid at the end of an attribute property, other than that its just curly braces all the way