@media media query and ASP.NET MVC razor syntax clash

Cssasp.net Mvc-3RazorMedia Queries

Css Problem Overview

I've got a large site that runs in ASP.NET MVC using the Razor view engine.

I have a base stylesheet which contains all of the generic styling for the whole site. On occasion, however, I have page specific styles which in the <head> of the page - usually this is one or 2 lines.

I don't particularly like putting the CSS in <head> as its not strictly separation of concerns, but for one or two lines, that really is specific to that page, I prefer not have to attach another file and add to the bandwidth.

I've got an instance though where I would like to put a page specific media query into the <head>, but because a media query uses the @ symbol and brackets {} it's clashing with the razor syntax:

@section cphPageHead{
     <style>
        /* PAGE SPECIFIC CSS */
        ...
      
        @media only screen and (max-width : 960px) <-- the @ symbol here is clashing!
            {
               ... }
            } 
    </style>
}

Is there a way I can get around this?

Css Solutions

Solution 1 - Css

use double @@ symbols. That will escape @ symbol and render @media correctly on client side

Solution 2 - Css

Also remember to add a space after double @@:

 @@ media only screen and (max-width : 960px)

@@media with no space did not work for me.

Solution 3 - Css

I realize this is old question, but this is the only solution that worked for me:

@section cphPageHead{
    <style type="text/css" media="screen and (max-width:959px)">
    </style>


    <style type="text/css" media="screen and (min-width:960px)">
    </style>
}
Categories
Recommended Css Solutions
Recommended asp.net Mvc-3 Solutions
Recommended Razor Solutions
Recommended Media Queries Solutions

Previous Solution:

Rails params explained?

Ruby on-RailsRuby

Next Solution:

Build the full path filename in Python

PythonFilenames

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionSnifferView Question on Stackoverflow
Solution 1 - CssarchilView Answer on Stackoverflow
Solution 2 - CssA-SharabianiView Answer on Stackoverflow
Solution 3 - CssDautView Answer on Stackoverflow