I am using the same stylesheet for the main site as well as a 'preview' of the site (NOT in an iframe because I need it to be interactive). The issues is, the preview does not take up 100% of the screen width, so when media queries are based on screen size, the page behaves oddly. I am ok with making the editor/preview mode fixed width, though, so I thought perhaps there is some way I can disable the media-queries under certain conditions? I have no idea how to approach that, though. Either through javascript, or potentially loading an additional, generic stylesheet after the mediaqueries that would somehow reset things.

Otherwise I may have to make alternate stylesheets, which would be a pain to maintain, or redesign the page so that the preview area is 100% of the width.

I am using the same stylesheet for the main site as well as a 'preview' of the site (NOT in an iframe because I need it to be interactive). The issues is, the preview does not take up 100% of the screen width, so when media queries are based on screen size, the page behaves oddly. I am ok with making the editor/preview mode fixed width, though, so I thought perhaps there is some way I can disable the media-queries under certain conditions? I have no idea how to approach that, though. Either through javascript, or potentially loading an additional, generic stylesheet after the mediaqueries that would somehow reset things.

Otherwise I may have to make alternate stylesheets, which would be a pain to maintain, or redesign the page so that the preview area is 100% of the width.

• javascript
• css
• media-queries

• Some HTML\CSS would go a long way in helping us resolve your problem. – Lachlan McDonald Commented Dec 19, 2011 at 0:02
• Please try this solution mentioned here stackoverflow./a/20137580/567854 – Ijas Ameenudeen Commented Nov 22, 2013 at 5:23

3 Answers 3

You've got a number of options.

• First off, you can disable the "offending" stylesheet: with <link id="mediaSheet" rel="stylesheet" href="....">, you may run this in your onload handler: document.getElementById("mediaSheet").sheet.disabled = true;.
• If you feel like coding, you may add this link to your final HTML conditionally. E.g. if the page is requested with a GET parameter ?preview=true, the stylesheet element will not be generated.

Set the viewport meta to be a certain width that plies with the media query.

Ensure you have the scale set correctly though. I tend to remove it if you want a mobile to be able to see the desktop version.

Just like to add to A.Pavlov's answer (I can't add ments yet):

If you want to use JQuery

$('#mediaSheet')[0].sheet.disabled = true

Or if you want to disable all media queries, use class="mediaSheet" instead of ID:

$('.mediaSheet').each(function(){
    $(this)[0].sheet.disabled = true;
});