Как предотвратить переполнение текста из области моего героя для мобильных пользователей?

Question

Я настраиваю тему WordPress ( Impact ), но размер области заголовка / героя не работает для моего сайта (текстовое поле сдвигается вниз и скрывается в области переполнения ниже).

Это одна из проблемных страниц c: https://better.sg/content/interview-jonathan-tan-jerry-lim-contribute-sg/

У меня есть изображение героя с текстовым полем вверху, которое использует CSS и JS. Размер изображения героя (который я установил с помощью VH) и положение текстового поля (которое регулируется под нагрузкой из-за javascript) приводят к тому, что текстовое поле слишком мало для некоторых мобильных пользователей. Я не уверен, как это исправить. Что является причиной того, что текстовое поле будет перемещено ниже области героя, и как мне (а) настроить размер изображения героя для учета более длинных заголовков или (б) убедиться, что заголовок текста не корректируется ниже основания героя image?

Таблица стилей здесь: https://better.sg/wp-content/themes/Impact/css/style.css И мой инициал. js здесь: https://better.sg/wp-content/themes/Impact/js/init.js (не уверен, что это тот вызывая проблему).

У меня проблемы с отладкой, поэтому любые советы приветствуются! Спасибо!

Answer 1

Go на ваш сайт WordPress откройте, нажмите на Темы и затем выберите Настроить. В настройке выберите дополнительный CSS, добавьте следующий код и сохраните его.

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

Answer 2

Вы можете использовать @media правила в CSS ( ссылка ), чтобы уменьшить размер изображений заголовков на экранах меньшего размера