# Text in the jumbotron section falls apart apart when responsive

**URL:** <https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970>\
**Category:** Illdy\
**Created:** [May 4, 2017, 2:16pm UTC](https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970 "2017-05-04T14:16:15Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![smile](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/s/c37758/32.png) [@smile](https://colorlibsupport.com/u/smile)\
**Post date:** [May 4, 2017, 2:16pm UTC](https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970/1 "2017-05-04T14:16:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [May 4, 2017, 6:43pm UTC](https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970/2 "2017-05-04T18:43:57Z")

</div>

Hey there,  
Hope you’re doing well today

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

```auto
/*header font size for tablet*/
@media(max-width: 768px){
  #header.header-front-page .bottom-header h1{
    font-size:55px!important;
  }}
  
/*header font size for mobile*/
@media (max-width:525px){
   #header.header-front-page .bottom-header h1{
    font-size:50px!important;
  }}

```

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/](http://www.colorlib.com/illdy/))

I hope this helps 🙂

Best Regards,  
Support

---

<div class="post-metadata">

**Author:** ![smile](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/s/c37758/32.png) [@smile](https://colorlibsupport.com/u/smile)\
**Post date:** [May 5, 2017, 6:26pm UTC](https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970/3 "2017-05-05T18:26:36Z")

</div>

Thanks a lot! worked like a charm :))

---

<div class="post-metadata">

**Author:** ![mikesupport17](https://colorlibsupport.com/letter_avatar_proxy/v4/letter/m/bc8723/32.png) [@mikesupport17](https://colorlibsupport.com/u/mikesupport17)\
**Post date:** [May 5, 2017, 6:28pm UTC](https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970/4 "2017-05-05T18:28:04Z")

</div>

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,  
Support

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [April 19, 2021, 8:12am UTC](https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970/7 "2021-04-19T08:12:46Z")

</div>

I will mark this cse as a resolved

---

<div class="post-metadata">

**Author:** ![colorlibsupport](https://colorlibsupport.com/user_avatar/colorlibsupport.com/colorlibsupport/32/1494_2.png) [@colorlibsupport](https://colorlibsupport.com/u/colorlibsupport)\
**Post date:** [April 19, 2021, 8:12am UTC](https://colorlibsupport.com/t/text-in-the-jumbotron-section-falls-apart-apart-when-responsive/15970/8 "2021-04-19T08:12:50Z")

</div>