Need help to customise a line break in a text header on mobile view

Site URL: http://www.gogo-cheng.com

Hi there. Looking for some help as completely new to coding. When in mobile view the line breaks on my landing page header are set how I want them - see left hand image, with 'Customer Loyalty' on one line. But when I view the website in real life on my phone it rearranges the text to the right hand view. No amount of tweaking the font size or box size seems to be making it play ball - is there a code for setting the line breaks?

THANK YOU - website goes live Monday next week so any thoughts super welcome!

Sarah 

The line breaks are responsive to the width of the device that you're looking on as well as the scaling on your phone, so this can be challenging to make look identical to everyone. You could adjust the heading font size just on mobile in that section using a vw property rather than rem or px, that would make the font size vary depending on the width of the device, and would do a better job of keeping the text on three lines as you want it.

Can you share the password for the website? I can provide you with a little custom CSS that should achieve this look for you.