Making text mobile responsive

Hi

I’ve got the following code in a text widget and am attempting to make the header of the site shrink when it’s viewed on mobile…however it isn’t working! I feel like the h1 theme settings are over-riding the @media stuff but don’t know how to fix it. The site isn’t live and I’m only just teaching myself html and css so not too techy responses appreciated!

Thanks very much.