Materialize Responsive Image not applying in Card

Question

I have a card in materialize:

<div class="row">
    <div class="col s12 m7">
      <div class="card large">
        <div class="card-image">
          <img class="responsive-img" src="img/xv-chars.png">
        </div>
        <div class="card-content">
          <p>I am a very simple card. I am good at containing small bits of information.
          I am convenient because I require little markup to use effectively.</p>
        </div>
      </div>
    </div>
  </div>

The image it references is 1680px wide, despite the responsive-img class it is not shrinking the width when I view it on a mobile device. Instead it is displaying the image at full size causing the user to scroll far to the right.

Here is a screenshot of it on the main page and another of scrolling to the right,, does anyone know how to force the image to show correctly in a card?

EDIT:

I added a lot of text to the card and that changed things, now the image shows correctly in all screen sizes, however the text now shows randomly and spotty. The actual text is 4 sentences long. When I lower it down to about half that I get the image problem.

Answer 1

There was an unclosed up in the nav bar, through everything out of wack. Closed it and text and image are responding perfectly.