Font size change on mobile device

Hi,

When I scroll down the page in mobile web (on my iPhone in Chrome), the font size changes on every page.

Why is this happening?

How can I prevent this from happening?

Can I fix it without code? If no, what code should I use? 

I was given this code to add in, but it only worked for the homepage:

@media screen and (max-width:767px) {
div#block-73ce79433bfa71edec75 h1 {
    font-size: 40px !important;
}
div#block-c419671ba5feb1ec51dd h2 {
    font-size: 32px !important;
}
}

Thanks in advance!

website is:
https://www.dallasiyengaryoga.com/

Change to this code

@media screen and (max-width:767px) {
body h1 {
    font-size: 40px !important;
}
body h2 {
    font-size: 32px !important;
}
}

Thank you!

I noticed other fonts were jumping too, like "paragraph 1" and "h3".  So, I followed your code concept to h3:

body h3 {
    font-size: 24px !important;
}

and that worked!

But I don't know what to use for "paragraph 1". Can you provide code for those too? Thanks!

Thanks!