Mobile Header Text Layout


#1

Greetings once again, and thank you so much for your awesome Sydney theme. This is the third website I’ve created with it, and I just can’t praise it enough.

Could you please help with a small problem? The front-page header main title and sub title are not displaying properly when looking at my site on my mobile phone. I have looked for solutions in the archive, and have made countless modifications in Simple Custom CSS. Nothing has worked so far. Any suggestions?

dougcrawfordwellness.com

Thank you.


#2

Hello there,

Thank you for choosing our product.

In order to adjust the text readability on smaller screen, could you please try to apply the following CSS code through the Simple Custom CSS plugin or child theme’s style.css?

@media only screen and (min-width:801px) and (max-width:991px){
  
  .slide-inner{
    margin-left: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .text-slider .maintitle{
    font-size: 32px !important;
    line-height: 38px;
  }
  
  .text-slider .subtitle{
    font-size: 20px !important;
    line-height: 26px;
  }  
  
}



@media only screen and (max-width:800px){
  
  .slide-inner{
    margin-left: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .text-slider .maintitle{
    font-size: 20px !important;
  }
  
  .text-slider .subtitle{
    font-size: 14px !important;
    line-height: 18px;
  }  
  
  .text-slider .maintitle,
  .text-slider .subtitle{
    width: 100% !important;
  }
  
}

You would do an adjustment accordingly.

Regards,
Kharis


#3

That worked. Thank you. I may have to tweak it a bit, but you gave me a great start.

Thanks again.


#4

Awesome! I am glad to know that you have been able to resolve it. I am marking this thread as resolved. Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis