Why does @media change body properties?

Question

I really can't figure out why if I use:

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

The body changes height and margin. Take a look at these samples:

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

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

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

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

Anyone with an idea?

+3

html css css3 media-queries

Davide scanu May 20 '15 at 15:08

source to share

1 answer

Oli Fletcher · Accepted Answer · 2015-05-20T15:13:38+0000

Your half colon at the end of your media query invalidates the body selector!

Just remove that so you only have a closing parenthesis.

EDIT

Semi-columns in CSS are only valid at the end of an attribute property, except that its just curly braces in full