Manual changes to make my site responsive

I am using Tesseract WordPress theme. It was suppose to be a fully responsive theme. However, when I look at my site on a mobile device, the title heading does not resize properly. The words becomes hyphenated, (e.g. the word EXPLORE becomes EX-PLORE) https://www.mobilitysolutionsconsultant.net/

Every Heading word has the similar issue — Strategy becomes STRAT EGY, https://www.mobilitysolutionsconsultant.net/strategy/

Even the paragraphs are hyphenated. I was told that I would have to add manually the @media….

I found this resource: https://responsivedesign.is/examples/web-developer-designer-agency/rally-interactive.

This code is outlined for this website. Can I just copy and paste this code into my child theme? Will this correct my website?

--------------------------------------------------------------------------
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui" />
@media (min-width:768px){}

@media (min-width:480px) { }

@media (min-width:640px) {}

@media (min-width:768px) {}

@media(min-width:900px) { }

@media(min-width:1260px) { }

@media(min-width:1440px) { }

@media(min-width:768px) and (min-height:990px) { }

@media(min-width:768px) and (min-height:1164px) { }

@media(min-width:768px) and (min-height:660px) {}

@media(min-width:768px) and (min-height:920px) {}

@media(min-width:768px) and (min-height:1164px) {}

@media(min-width:768px) and (max-height:620px) {}

@media(min-width:1080px) {}

@media(min-width:1080px) and (max-height:920px) {}

@media(-webkit-min-device-pixel-ratio:2),(min-resolution:192dpi){}
----------------------------------------------------------------------------

Any assistance would be greatly appreciated.
Jeff