@media screen not working with custom css

I'm trying to add some custom css to the mobile layout of the website, but for example the following code is giving syntax error:

Your code is invalid, use this

@media screen and (max-width: 1207px) and (orientation: portrait) {
.site-wrapper, .sqs-catalog {
font-size: 12px;
}
}