Change font size header only on mobile device

I hope I can explain my problem, since English isn’t my native language and I’m completely new to CSS.
I use the Vantage theme with SiteOrigin Page Builder.
The header text (h1) on the different pages should have to be a large font size (H1: 48 pixels), but on a mobile device I have a problem with long words when I do this.
For instance: professionals becomes
professional
s

I thought I had found some solutions in this forum and tried different CSS codes, but no result so far. Probably they were not exactly what I need and I don’t have the knowledge to see what’s going wrong, although I have learned a lot these past few months. The last thing I tried was this:
/* Mobile */

@media (max-width: 780px) {

.entry-content h1 {
font-size: 20px;
}
}

Please don’t laugh when it’s completely nonsense.
I have checked both the Vantage theme and Page Builder on “responsivity”. Mobile width is 780 pixels.

Can anyone help me with this?

And my second question:
I added a few codes so far in CSS, using SiteOrigin CSS. Is it really not necessary to make a child theme for those changes? It’s not completely clear to me when to use a child theme and when just add some snippets in SiteOrigin CSS.

Thanks in advance!
MoMoed