Header text when mobile size

Please see screen shot: https://www.screencast.com/t/cIhMxYOV

I had to change my header and sub-header to better accommodate what I am doing with Astrid. All is fine when the user is on desktop/laptop and to an acceptable extent on a tablet. However, when using a mobile size, it gets reversed.

What is the CSS I need to change the fonts on a mobile size (just for this home page)?

Hi,

Here is the CSS code to change the font size on a mobile screen:

@media only screen and (max-width: 991px){
  .header-subtext {
    font-size: 16px;
  }
  .header-text {
    font-size: 22px;
  }
}

Thank you Awan. I had to tweak it a bit because it did not work exactly as you had indicated.

These changes made it work perfect.

/* Mobile */
@media only screen and (max-width: 991px){
h4.header-subtext {
font-size: 15px !important;
}
.header-text {
font-size: 30px !important;
}
}

Ah, I see… use the !important rule.

Great to know it’s solved.