Getting errors in the CSS linter when using media queries

Question

When I put the code below through the CSS Linter I get six errors. Are these bugs in the linter or the CSS? I can't see anything wrong with the CSS. I can't seem to turn off or ignore the errors either regardless of the settings.

@media ( max-width: 320px ) {
    .test {
        padding: 20px;
    }
}

score 3 · Answer 1 · answered Mar 25 '13 at 22:44

3

Your code is valid it's just that css link is being picky about the formatting.

If you change it to the following it's quite happy with it:

@media(max-width:320px){.test{padding:20px;}}

I'd recommend using this site to validate your css:

http://jigsaw.w3.org/css-validator/

answered Mar 25 '13 at 22:44

Billy Moat

20,792
7
45
37

Wow. Thanks. I know the linter is a bit picky but it is handy to have it run in real time in sublime and all the other stuff I can control in user prefs. This part is a bit shocking though IMO. Thanks for your answer, really helps. – byronyasgur Mar 25 '13 at 22:50

score 3 · Accepted Answer · answered Apr 14 '14 at 09:37

3

I only had to remove the spaces for it to pass:

@media (max-width:320px) {
    .test {
        padding: 20px;
    }
}

answered Apr 14 '14 at 09:37

Tim

6,281
3
39
49

good to know I suppose it's a bit of an improvement ... still it's pretty picky isn't it ... I think it looks more readable with the spaces, no? – byronyasgur Apr 14 '14 at 12:50

Getting errors in the CSS linter when using media queries

2 Answers2