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; } }