物化响应图像不适用于卡片

Question

我有一张卡片在物化中：

<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>

它引用的图像是 1680 像素宽，尽管有 responsive-img 类，但当我在移动设备上查看它时它并没有缩小宽度。相反，它以全尺寸显示图像，导致用户向右滚动很远。

这是它在主页上的屏幕截图和另一个向右滚动的屏幕截图，有人知道如何强制图像在卡片中正确显示吗？

编辑：

我在卡片中添加了很多文字，这改变了一些事情，现在图像在所有屏幕尺寸下都能正确显示，但文字现在随机显示且参差不齐。实际文本是 4 个句子长。当我将其降低到大约一半时，就会出现图像问题。

Answer 1

导航栏里有一个未封闭的地方，一切都变得古怪。关闭它，文本和图像响应完美。