CSS Media Query not working with Ipad device

I am trying to create some text that would show on Mobile Devices with 415px some text and on Ipad 768px it would show a different text. And the problem is that the text of iPhone it shows on Ipad too and the Ipad text it doesn’t show at all and I need some help so I can show on Ipad Device the text I have created and on iPhone Device it would show the iPhone text, because I’ve been struggling with this for long and still wasn’t able how to fix this. Thank you.
https://codepen.io/beh4r/full/vYBLaoV

Your mobile text and button needs to not display initially, but your ipad text and button do. It looks like you have display: none initially set on the wrong elements.