0
votes

I'm trying to validate my CSS. My main stylesheets come back with no errors, but I have mobile.css, tablet.css, and laptop.css with media queries and they're all returning a "unrecognized media only" message when I go to validate.

Here's my mobile.css:

@media only screen and (min-width : 320px) and (max-width : 500px)  {
.container {
    width: 100%;
}
header {
    width: 100%;
    height: 100px;
    background-size: 100%;
    background-repeat: no-repeat;
}
.content {
    width: 90%;
}
footer {
    width: 100%;
}
nav {
    display: none;
}
}

The other files/media queries are very similar (different min-widths, etc.).

The validator says:

Sorry! We found the following errors (2)

1 unrecognized media only

20 Parse Error screen and (min-width : 320px) and (max-width : 500px) { .container { width: 100%; } header { width: 100%; height: 100px; background-size: 100%; background-repeat: no-repeat; } .content { width: 90%; } footer { width: 100%; } nav { display: none; } }

1
Is your mobile.css exactly same as you shared or has it more rules?Shashank Bhatt
How do you validate your css? W3 validator (jigsaw.w3.org/css-validator) doesn't show any errors on your css. So I guess it's a bug on your validator or you validate a wrong version.Mark Baijens
It's exactly as I shared. And I was using css-validator.org, is that not the correct validator?Veronica

1 Answers

0
votes

As you said in the comments, you use css-validator.org.

When I validate your css there (css-validator.org) it says it validates for CSS level 2.1. Media query's are not in CSS since version 3 so that's why the validation fails.

If you use the W3 css validation (jigsaw.w3.org/css-validator) it shows no errors while validating for CSS version 3 + SVG