Mobile site title is too large

hello
You should use media query when you only want CSS to apply to mobile devices.

@media only screen and (max-width: 600px) {
  .site-title {
    font-size: 2rem; //or any suitable size
  }
}

for more details: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

Thank you so much for your response!
I copy pasted the code into customizer/additional css but nothing changed? Am i doing something wrong?

you changed the class to mobile-site-title so try this:

@media only screen and (max-width: 600px) {
  .menu-toggle .mobile-site-title {
    font-size: 1.7rem; //or any suitable size
  }
}

don’t forget to clear cache after change style with ctrl+f5 or use an incognito window

Thank you so much for your kind help, it worked ??