Tuesday, 26 November 2013

SharePoint 2013 - Responsive SharePoint Design Issues with IE8 and @media tags

UPDATE:  After looking at this again, the answer is yes, I must have been doing something silly.  Guessing the page was not fully refreshing after checking in the Master Page with the changes or something like that, as I haven't changed anything to get it to work, just re-downloaded & re-added the respond.js files.

-----------------------------------------------------

I've been spending some time with the Responsive SharePoint solution I found on CodePlex here: https://responsivesharepoint.codeplex.com/

and have come across an issue that I am yet to resolve when using Internet Exploer 8 (IE8) to view the page.

Using: Bootstrap-3-server.master

Issue: When using IE8, the top navigation defaults to the mobile view even when full screen (wider than 768px). This is due (i think) to IE8 not reading the .navbar-toggle inside a @media tag, which when wider than 768px, is hidden via display:none. 


Normally, for a solution using bootstrap, to resolve issues with the @media css tag, they ask that you use respond.js which allows IE8 to use @media tags successfully.


I have saved the respond.js file locally on the server and referenced it within the bootstrap-3-master master page but the @media tags are still not being found by IE8.


Has anyone else had/solved this issue? Could it be something silly I'm doing wrong here?



2 comments:

  1. It should work. I have been doing the same thing.
    But be sure to include the Respond.min.js not the Uncompressed one.
    Uncompressed Respond.js didn't work for me.

    ReplyDelete
  2. Hi Bibek,
    Thanks for getting me to look at this again. I'd given up. I just did some tests then and now it works fine in IE8... haha. I'm guessing I must have had some trouble with the page not doing a full refresh after checking in changes, but yep, works perfectly now.

    thanks a lot!

    ReplyDelete