Mobile header text cut off + empty space on right side

My header in my mobile is still getting cut off even though I added a class to the style sheet for this text. The sub text is very responsive and re-sizes/ creates breaks when screen size changes, but the main text does not.

I am also getting a lot of random blank space on the right side of my mobile site.

My website is tarangophotodesign.com

I am sorry, I can’t get this issue appears on my phone. You might need the below CSS code to fix it.


html,
body {
   overflow-x: hidden;
}

Add it into Appearance > Customize > Additional CSS in your site dashboard.

Let me know how it goes.

Regards,
Kharis

The blank space is gone, but the header still gets cut off.

https://tarangophotodesign.com/portrait-photography

Try adding the below custom CSS code to resize your custom header text.


@media only screen and (max-width:500px) {
  
  .my-page-heading-text {
    font-size: 40px !important;
  }
  
}

@media only screen and (max-width:360px) {

  .my-page-heading-text {
    font-size: 35px !important;
  }  
  
}  

The !important argument is needed to against inline style.

Regards,
Kharis

Works perfect, thank you!

You’re welcome!

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