Home>Support>Change font size header only on mobile device

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

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More