2

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

Improve this question

1 Answer 1

Reset to default
4

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
Improve this answer
5
  • 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 ♦
    Commented Dec 19, 2013 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
    Commented Dec 19, 2013 at 21:39
  • @RJCuthbertson Thanks! I look into the Respond.js tomorrow. But it looks promising! :-)
    – Benny Skogberg ♦
    Commented Dec 19, 2013 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
    Commented Dec 19, 2013 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
    Commented Dec 20, 2013 at 7:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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