Header size changes

I’m trying to figure out the best way to make my website look good on all devices. The responsive website template works pretty well, but some of my single word headers separate onto two lines when you pull the website up on a phone. Can you please help me with this. Maybe there is a way to make it so that the text size of the header changes as the size increases and decreases? Here is a picture of the problem.


Hey there

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Additional CSS

/*Mobile CSS*/
/*reduce header size*/
@media (max-width: 550px){
  #header .bottom-header h1 {
    font-size: 30px;
    line-height: 45px;
  #header .bottom-header {
    padding-top: 100px;
    padding-bottom: 0px;

Best Regards,

That worked perfectly thank you so much!

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,