Changing headers font and position on mobile

Hi all and thank you for this great team and great support. I wanted to adjust out site header and content for mobile devices and was able to do it on the homepage with this code I copied from the forum.
How can I make this work not only for the homepage but for all the pages?
the objective is to reduce font for mobile and move the content up. thanks

/Header txt font size/
@media screen and (max-width: 567px) {
#header.header-front-page .bottom-header h1 {
font-size: 3em;
}
}

/Content padding top/
@media (max-width: 1024px) {
#header .bottom-header {
padding-top: 40px;
padding-bottom: 40px;
}
}

Hello there,

I hope you are doing well today.

Changing the font size for the other ages would require new CSS code. Could you please provide a link to your website so that I can inspect it?

In the meantime, you can use the following CSS code to change the heading font size by going to Appearance > Customize > Additional CSS and pasting it there.


/*Heading Font Size*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-size: 12px;
}

Best Regards,
Support

Hi Support, I hope you are well.
Thanks for the help. I was able to fix the issue from your suggestion. the theme is now active on the site.
Thanks http://krbschoolofenglish.com

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support