Text in the jumbotron section falls apart apart when responsive

This is my 2nd and 3rd question sorry if i’m asking a lot.

when i add text to the Jumbotron section and view it on a smaller screen, the litters falls to the next line not the word! for example Batteries “Batt” on one line and “eries” goes to the next line! how can i fix hyphenation and let each word stay together.

My second question: I need to change the hover link on the primary menu on top of the jumbotron section only on the home page! so i need to target the .page and the a menu a link ! can you please tell me how!

thanks in advanced.

Hey there,
Hope you’re doing well today

Kindly add and save the following code to Appearance > Customize > Additional CSS:

/*header font size for tablet*/
@media(max-width: 768px){
  #header.header-front-page .bottom-header h1{
/*header font size for mobile*/
@media (max-width:525px){
   #header.header-front-page .bottom-header h1{

You may change the font sizes in the code above to a larger or smaller size to tailor it to your text. I made this code on the Illdy demo site (www.colorlib.com/illdy/)

I hope this helps :slight_smile:

Best Regards,

Thanks a lot! worked like a charm :))

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,

I will mark this cse as a resolved