Question

Im working on a MVC3 application, with a masterpage which renders the views in the body.
Now I have 2 css files (different layouts), and I want to select the CSS depending on the screen size of the client.
Everything works with the code below, however, only for the index page, whenever I go to a second page, whatever it is, no CSS is rendered at all.
The code below is placed in the HEAD section of the masterpage.

<script type="text/javascript">
      var css = './Content/SiteWide.css'     

      if ($(window).width() < 1140) {
      css = './Content/SiteNarrow.css';            
      }
      var tempcss = '<link href="TEMPCSS" rel="stylesheet" type="text/css" />';
      var cssLink = tempcss.replace("TEMPCSS", css);
      document.write(cssLink);    
</script>

So somehow the css doesnt load again when you go to a second page (all using the same masterpage), do you guys have any ideas?

thanks

Answer 1

Pro-tip: Don’t use static file locations. Make use of Url.Content.

Your code would look like:

var css = '@Url.Content("~/Content/SiteWide.css")'; 

Try this out and see if it works. From experience I’ve had static locations sometimes not work as expect, whereas Url.Content did the trick for me.