Docs

[adamf1]

It is possible to make my websites header text responsive and prevent it from wrapping onto two lines.
If I make the text font size small if to for it to fit on one line for mobiles it becomes too small on full screens.

Appleshaw Hall and Playing Field for Hire

[Rue Nel]

Hello There,

Thanks for writing in! To make your header text as responsive, please do the following:
1] please add the following JS code in the customizer, Appearance > Customize > Custom > Javascript

jQuery(".x-brand.text").csFitText(1.2, { minFontSize: '12px', maxFontSize: '40px' });

2] And then please add the following css code in the customizer, Appearance > Customize > Custom > CSS

@media(max-width: 979px){
  .x-logobar .x-container.max.width {
    width: 98%;
    max-width: 100%;
  }
}

Hope this helps. Please let us know how it goes.

[adamf1]

Hi,

I found it did not work. It simply made the font much bigger and the text would wrap onto two lines more than before.

It seems the only way I can stop the text wrapping onto two lines is the make the font max size much smaller.

I am not certain the CSS code is making any impact

[Joao]

Hi There,

Did you change your font size already?

It seems fine on my end,

If you would like to have a bigger title on desktop but smaller font on mobile you can go to Appereance > Customizer > Header set your desktop font size,

than add the following code with the desired font size for mobiles(for example: 22px)

@media(max-width: 480px){
.x-brand {
    font-size: 22px;
}
}

Hope that helps

Joao

[Author]

Posts