Font-Size changes on mobile device

I'm creating a website for a Uni project and during my testing i've come across a problem with my font-size, but only on certain pages of my site when looking on a mobile device.

Homepage and Content pages don't seem to reduce for the screen size, whereas the contact page works correctly.

It's only linked to one CSS file and all pages are using the same tags for the typography.

Any help would be much appreciated.

My CSS is as below:

h1 {
    color: #848da8;
    font-family: 'Metamorphous', jones, sans-serif;
    font-size: 40px;
    font-size: 2.5rem; 
    margin-top: 10px;
    padding: 20px 5px 5px 5px;
    text-align: center;
    }

h1.logo {
    margin-top: 10px;
    text-align: left;
    }

h2 {
    font-weight: 600;
    margin-top: 10px;
    }

h3 {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    }

h4 {
    background-color: #848da8;
    color: #fff;
    font-weight: 400;
    font-size: 17px; 
    font-size: 1.1rem; 
    padding: 10px 0px 10px 0;
    }

p {
    font-family: "Open Sans", Helvetica, sans-serif;
    font-size: 14px;
    font-size: 0.9rem;
    letter-spacing: -0.5px;
    padding: 10px;
    }