Responsive Design broken

Hi! I know that we have a layout for mobile devices, but it's broken on the pages with code snippets and another unfixed width content. Screenshots are attached.

I found that overflow property has 'auto' value, but the width (and max-width) property doesn't set for <pre>. Could you set max-width property for pre and other elements?

For example, these modified styles work fine for me on any screens for <pre> and <img> (with your media queries):

pre {
      display: block;
      padding: 9.5px;
      margin: 0 0 10px;
      font-size: 13px;
      line-height: 1.42857143;
      color: #333;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      border-radius: 4px;
      max-width: 92vw;
}

img {

    max-width: 92vw;

}

Be noticed that it stops to break lines and adds horizontal scrollbar to <pre> elements with exceeded width (which is better, I believe, cause it saves original code flow).

The better approach would be to write different styles in different media queries to achive desirable behavior on all types of screens.

Thanks!

Update:

Text above is about Chrome (mobile and desktop). In Firefox styles are ok, because Firefox may evaluate width (or overflow) of elements differently (if it's not defined by developer).
Please, explicitly set the max-width property for possible content (<pre>, <img>, etc) for consistency in all browsers.