Override global css with pure javascript

Modify the css as you want by modifying this object

document.getElementsByTagName("style")[0].innerHTML

OR

Modify style attribute of relevant DOM objects

document.getElementsByClassName("my-nice-class").style[0] = "max-width: 40%;max-height: 40%;"

NOTE: You have to use a for loop instead of style[0] if you have multiple objects.

For a scalable solution to this problem you could also consider to go for a BEM implementation where you will add and remove modification classes.

//HTML
<div class='my-nice-class my-nice-class--dimensions_A'></div>

Then the css:

CSS:
.my-nice-class--dimensions_A {
  max-width: 90%;
  max-height: 90%;
}

.my-nice-class--dimensions_B {
   max-width: 40%;
   max-height: 40%;
}

Then the javascript can add and remove this classes

//Javascript
var htmlEl = document.getElementsByClassName('my-nice-class')[0]; // in case you need the first element from the elements array
htmlEl.classList.add("my-nice-class--dimensions_B");
htmlEl.classList.remove("my-nice-class--dimensions_A"); // cleaner but optional, since cascading character of css will render --B first anyway at this point

document.getElementsByClassName("nav-questions").style.maxHeight="40%";
document.getElementsByClassName("nav-questions").style.maxWidth="40%";

This line of code automatically override the global css as priority of JS applied css are always higher(even then inline css).