Try to use a media query to adjust the font size based on the width of the window. You can try adding this to your Custom CSS section.
@media only screen and (max-width: 640px) {
#header h1.site-title { font-size: 24px; }
}
It should reduce the font size to 24px for screen width under 640px. Chose the font size up to your taste, though 640px and 480px are the most common values for max-width of a mobile device.
To affect blog titles with a media query, you should do this:
@media only screen and (max-width: 640px) { .collection-type-blog article .entry-title { font-size: 12px; }}
I hope it helps.
My Facebook (facebook.com/juicersblenders)
My YouTube (youtube.com/channel/UCVQU1J1WuLOs1u1U77MKAPA/)
My site (juicersblenders.org)