html - 图像上的文字-Make适用于较小的屏幕

我是一个非常新的编程，我正在尝试修改我的视网膜模板，以自定义我的Shopify商店。到目前为止很有趣，而且取得了很好的成绩！
然而，我被这个问题困住了：如何使我的代码响应？
我设法添加了HTML和CSS代码以使文本覆盖图像，但我无法使它对较小的屏幕（例如移动设备）做出响应（文本自动调整大小）
HTML代码

<div class="textoverimage">
    <img src="xxxxxx" alt="xxxx">
    <h7> TEXT </h7>
</div>

CSS代码：

/* #Custom Styles
================================================== */

.textoverimage {
   position: relative;
   width: 100%;
}

h7 {
   position: absolute;
   top: 75px;
   left: 0;
   width: 100%;
  text-align: center;
}

我使用h7不干扰任何预先存在的代码（Suffice使用h1 -ccc>）

最佳答案

你可以通过媒体查询来获得它。

@media only screen and (max-width:500px) {
    h7 {
        font-size:14px;
    }
}

当屏幕宽度降到500px以下时，这将使h7的字体大小变为14px。