[adamf1Participant]

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.

http://appleshawhall.co.uk/

[Rue NelModerator]

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.

[adamf1Participant]

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

[JoaoModerator]

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