Question

I was just wondering about how to disable the responsive css on the Boilerplate framework.

What I have done so far is replacing the different attributes like the one below. It does seems to work on chrome but not on IE and Firefox, so I am not sure how to really do it.

@media only screen and (min-width: 480px) {

by

@media only screen and (max-width) {

Can someone help me ?

KR

Answer 1

I don’t know of a way to globally override one set of rules with another easily. There are options however.

0) Just remove the offending stylesheet. (I know that’s not the answer you want, but it is the absolute most sure fire way).

1) If it is feasible, you can create a second style sheet that undoes everything in the first sheet that you don’t want. That’s difficult to maintain, but will give you what you want. As long as all of the rules are identical and they come after your media rules in the document, they will override them.

2) With javascript, you can disable indvidual stylesheets entirely, or manipulate individual rules. Check out document.styleSheets. It’s an array containing your stylesheet objects. You can say document.styleSheets[0].disabled = true to disable the first style sheet on your page. You can also traverse document.styleSheets[0].cssRules to manipulate all of the css rules for a style sheet.