javascript - 如何防止移动用户的英雄区域文本溢出？

Question

我正在自定义 WordPress 主题 ( Impact )，但标题/英雄区域大小不适用于我的网站(文本框被推下并隐藏在下面的溢出区域中)。

这是有问题的页面之一:https://better.sg/content/interview-jonathan-tan-jerry-lim-contribute-sg/

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

样式表在这里:https://better.sg/wp-content/themes/Impact/css/style.css 我的 init.js 在这里:https://better.sg/wp-content/themes/Impact/js/init.js (不确定这是否是导致问题的原因)。

我在调试时遇到问题，因此非常感谢您提供任何建议!谢谢!

Answer 1

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

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