如何防止我的英雄区域中的文本为移动用户溢出？

Question

I'm customising a wordpress theme ( Impact ) but the header / hero area size is not working for my site (text box gets pushed down and is hidden in the overflow area below).

This is one of the problematic pages: https://better.sg/content/interview-jonathan-tan-jerry-lim-contribute-sg/

I have a hero image with a text box on top that uses CSS and JS. The size of the hero image (which I set using VH) and the position of the text box (which adjusts on load due to a javascript) cause the text box to be positioned too low for some mobile users. I am not sure how to fix this. What is causing the text box to be pushed below the hero area and how do I either (a) adjust the hero image size to account for longer titles or (b) make sure the text title does not adjust down below the bottom of the hero image?

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 (not sure if this is the one causing the problem).

I'm having trouble debugging, so any advice is appreciated! Thanks!

Answer 1

Go to your WordPress website open click on Themes and then select Customize. In Customize select additional CSS and add the following code and save it.

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

Answer 2

You could use @media rules in CSS ( link ) to reduce the size of your header images on smaller screen sizes