How to make the Title Heading H1 small in size in Generate Pro Genesis Theme for Wordpress

I am using Generate Pro theme of Genesis and the biggest con about this theme is the size of the heading when seen in the Mobile. Also the Font.

As the users are shifting more on mobile, is very important for me to make my site look beautiful in Mobile.

What do I mean? How Title Looks in the Mobile

As you can see it is taking up all the above(up-the-fold) content only for the heading.

All my Content shifts low and I have to scroll for seeing it. Which BTW nobody likes.

Also the Font-Looks Very Bad, it is really light in colour and most of the people have to focus high to see it.

I changed the font with the help of Google Font Plugin but still, the size of H1 is non-changeable, I tried Google Font and also tried changing code font-size in the WordPress but nothing helped. The code I tried changing looks like this.(Below)

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Source Sans Pro', sans-serif;
    font-weight: 300;
    line-height: 1.2;
    margin: 0 0 20px;
}

h1 {
    font-size: 36px;
}

h2 {
    font-size: 30px;
}

h3 {
    font-size: 24px;
}

h4 {
    font-size: 20px;
}

h5 {
    font-size: 18px;
}

h6 {
    font-size: 16px;
}

Using @media CSS, you can do things like this:

@media screen and (max-width: 780px) {
  h1 {
    font-size: 25px;
  }

  /* More CSS */
}