如何防止我的英雄區域中的文本為移動用戶溢出？

Question

我正在自定義 wordpress 主題（影響），但 header / hero 區域大小不適用於我的站點（文本框被推下並隱藏在下面的溢出區域中）。

這是有問題的頁面之一： https://better.sg/content/interview-jonathan-tan-jerry-lim-contribute-sg/

我有一個頂部帶有文本框的英雄圖像，它使用 CSS 和 JS。 英雄圖像的大小（我使用 VH 設置）和文本框的 position（由於 javascript 會在加載時進行調整）導致文本框的位置對於某些移動用戶來說太低了。 我不知道如何解決這個問題。 是什么導致文本框被推到英雄區域下方，我該如何（a）調整英雄圖像大小以適應更長的標題或（b）確保文本標題不會向下調整到英雄底部以下圖片？

The style sheet is here: https://better.sg/wp-content/themes/Impact/css/style.css And my init.js is here: https://better.sg/wp-content/themes/Impact /js/init.js （不確定這是否是導致問題的原因）。

我在調試時遇到了麻煩，所以任何建議都值得贊賞！ 謝謝！

Answer 1

Go 到您的 WordPress 網站打開點擊主題然后 select 自定義。 在自定義 select 中附加 CSS 並添加以下代碼並保存。

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

Answer 2

您可以在 CSS (鏈接) 中使用@media規則來減小 header 圖像在較小屏幕尺寸上的大小