Display javascript variable in visualforce
Site.com strips out the media query definition from a CSS file when you try to import it, and if you try to manually edit the CSS file by adding the media query, you cannot save the file. Instead you receive the error message:
The CSS code contains mismatched or missing brackets. Ensure your CSS is formed correctly and try again.
Does anyone know why @media not working?
Unfortunately this is a known limitation of the Site.com platform. The CSS parser that is being used does not support some of the newer CSS3 features, such a media queries.
There are a couple of workarounds available if you can't wait for salesforce to fix the issue. These workarounds won't show the styles in the studio (like when you use the CSS editor), but when you preview the page they should be visible.
Import an external style sheet in the Head Markup
enter image description here
By selecting the page and then clicking Edit Head Markup under Scipts (see image above) you could add a reference to an external style sheet that contains any CSS you want using a link like the following:
Include a style directly in the Head Markup
Using the same steps as above, you could also add your CSS3 styles directly on to the page:
@media screen and (device-width: 800px) { color: red; }
Use a Custom Code block
Markup in a Custom Code block doesn't get validated, so you could include something like this:
moz-linear-gradient(top, #2F2727, #1a82f7);"/>
This will resolve the @media not working issue.