How to show one external css style sheet in design view? RRS feed

  • Question

  • Hi,

    I am using media queries to load up different style sheet's depending on browser width. It all works fine in browsers, however its always a pain looking at everything distorted in design view, as no style sheet is applied. I have no "base" style sheet that loads up regardless of width etc, so I need to assign/show a style sheet in design view if that is possible?

    It will give me back the visual aid of split view before I used media queries.

    any idea's? 

    Thanks in advance. 
    Tuesday, June 5, 2012 10:34 PM

All replies

  • Just choose a default style sheet to use in the event that none of your media queries succeeds, and that would apply in design view, where media queries don't run.


    Please remember to "Mark as Answer" the responses that resolved your issue. It is common courtesy to recognize those who have helped you, and it also makes it easier for visitors to find the resolution later.

    Tuesday, June 5, 2012 10:38 PM
  • This is a difficult issue to work around. EW's design surface doesn't see or recognise media queries at all, so uses the first bit of css it sees to render the page. If you rely totally on media queries, add a stylesheet link after these, which EW will see and the browser won't.

    If you are using a 'mobile first' design (arguably the best way), without a specific media query for the mobile styles, then you have to rely on a browser preview, because EW will see the initial mobile styles and use those.

    Incidently, you can use a mobile-first design to support older browsers like IE6. See  Adding a stylesheet after the media queries could also be used in this way, although the mobile-first approach is a better solution.

    Ian Haynes

    EW - V4 Add-Ins
    EW - Resources, hints and tips
    EW - Design for the Mobile Web

    Wednesday, June 6, 2012 7:58 AM