Javascript 如何防止手机用户从我的英雄区溢出文本？

我正在自定义wordpress主题，但标题/英雄区域大小不适用于我的站点文本框，文本框被按下，隐藏在下面的溢出区域中

这是一个有问题的页面：

我有一个英雄形象，上面有一个使用CSS和JS的文本框。我使用VH设置的英雄图像的大小和文本框的位置（由于javascript而在加载时进行调整）导致文本框的位置对于某些移动用户来说太低。我不知道如何解决这个问题。是什么导致文本框被推到英雄区域下方？我如何调整英雄图像大小以适应较长的标题，或者如何确保文本标题不会向下调整到英雄图像底部下方

样式表如下所示： 我的init.js在这里：不确定这是否是导致问题的原因

---

我调试有困难，所以任何建议都很感激！谢谢

您可以使用CSS中的@media rules在较小屏幕上缩小标题图像的大小

转到WordPress网站打开单击主题，然后选择自定义。在Customize中选择additional CSS并添加以下代码并保存

@media(max-width:768px){
     #single-page-slider{
          height:auto;
       }
       #single-page-slider .item-active .container .gap{
           width:80%;
        }
}

---

看起来很有意思。不知道为什么我没有想到用媒体查询覆盖高度标签这一差距也是一个有益的变化。谢谢在后期发生XD事件。