Take the 2-minute tour ×
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It's 100% free, no registration required.

I'm currently implementing responsive design on an intranet site. I’ve added plain links in the master page based on min-width and max-width media properties. It works like a charm, but it didn’t when I tried to use CssRegistration. For some unknown reason, the CssRegistration doesn’t have a media property (that I’m aware of). Is there a way of overcoming this problem using CssRegistration instead of plain HTML-links?

<!-- Responsive CSS-files based on width -->
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 801px)" href="/Style%20Library/css/ResponsiveMaster.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-width: 401px) and (max-width: 800px)" href="/Style%20Library/css/ResponsiveMasterPad.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-width: 400px)" href="/Style%20Library/css/ResponsiveMasterMobile.css" />

If I try, I get a well known screen:

enter image description here

share|improve this question

1 Answer 1

up vote 4 down vote accepted

As you say, there is no media attribute.

There are a couple of ways I can think of to handle this in SharePoint:

  • Either use Device Channels to target different master pages to different devices
  • Or, add all of your responsive CSS to one file, containing the @media wrappers. This will also be better since if you for example resize your browser window, you get the appropriate css as you go.
  • A third way that comes to mind is using a combination of @media and @import tags in one CSS-file, loading in specific files with the @import into the @media attribute
share|improve this answer
    
Device Channels look nice! Need to read more on that technique. Media wrappers isn't working in our IE8 environment. Import is an option, but since my link already work, import seems overkill. The link with media max-min width works very well resizing the browser window. Gives imediate response :-) –  Benny Skogberg MCSA Dec 19 '13 at 12:03
2  
You can use Respond.js to enable media queries in IE8. It's what Bootstrap uses to achieve this. github.com/scottjehl/Respond Device Channels are pretty nifty, but they only work on publishing sites. –  RJ Cuthbertson Dec 19 '13 at 21:39
    
@RJCuthbertson Thanks! I look into the Respond.js tomorrow. But it looks promising! :-) –  Benny Skogberg MCSA Dec 19 '13 at 21:52
    
Yeah, there are some gotchas with using it though. It doesn't work with CSS loaded via @import or with the file:// protocol (but you probably don't have to worry about that one with SP). –  RJ Cuthbertson Dec 19 '13 at 21:58
2  
Yeah .js frameworks to dynamically load CSS is pretty neat, the problem will be though, that you will be dependent on js to load even the basic styling of your site :) –  Robert Lindgren Dec 20 '13 at 7:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.