Header title text cut off in mobile

All of my pages have white text in a header with an image background. Some of the text is getting cut off on all of the pages in mobile view.

These rows are full width, if that has anything to do with it.

My website is:
http://biz197.inmotionhosting.com/~thewan19/

Hello Marriah,

Can you please describe how exactly you set the font size of that big white text?

Kind Regards, Roman.

Hello there,

Please avoid using an inline style (as seen below) for font size as it won’t work properly on smaller screen.


style="color:#ffffff; font-size:600%; line-height: 95%;"

Or, try to add a custom class name to your text to associate a specific styling on smaller screen. For instance:


<p class="my-heading-text" style="color:#ffffff; font-size:600%; line-height: 95%;">Your text goes here</p>

Then add this CSS code into Appearance > Customize > Additional CSS in your site dashboard.


@media only screen and (max-width:991px) {

  .my-heading-text{
    font-size: 20px !important;
  }

}

To against inline style, you’ve to put an !important argument.

I hope this reply helps.

Regards,
Kharis