CSS Media queries gets overriden when lightbox is open

Question

I have a CSS media query overwriting an element when the screen is smaller than 1000px. The media query works well until I open a colorbox, at that time the media query gets overridden by previous styles.

My code is this:

master.css

#header .holder {
...
width: 960px;
...
}

mobile.css

@media all and (max-width: 1000px) and (min-width: 320px) {
  #header .holder {
  ...
  width: 100%;
  ...
  }
}

When I open a colorbox I get this in Chrome's CSS inspector: https://i.sstatic.net/MvkUr.png (previous styles are overriding media queries' ones)

Why does the code gets overridden? What event is colorbox triggering in the window to make this happen?

Answer 1

Author of colorbox here. I haven't heard of an issue with this before, but it could be the result of the content you are displaying in colorbox.

Weird problems like this are typically due to people improperly opening HTML documents as ajax, rather than displaying them in an iframe. The resulting mix of invalid HTML, scripts, and styles cause all sorts of issues.

My guess is that this is something specific to your implementation. I suggest trying to create a simplified demostration of the problem in jsfiddle.net and posting a link to that here, or to colorbox's issue tracker.