Add Responsive Text Using CSS

I have been through all of the forums, documentation and Youtuve videos about the Masterslider on this subject, but I can’t seem to find an answer to this question: What custom CSS can I add to my slider to make the text resize for responsive scaling (for mobile devices) and where do I place it? (There appears to be two seperate places for Custom CSS – one on the layer style and one on the slide style). I can’t seem to get either to have any effect at all on my text.

I placed this piece of code in my custom slide style (I got from your support forum):

@media (max-width: 767px) {
.ms-slide-info h1 {
font-size: 22px !important;
line-height: 34px !important;
margin-bottom: -15px !important;
}
.ms-slide-info p {
margin-bottom: -20px !important;
margin-top: 15px !important;
}
}

– – – –

Please let m ekonw how I can fix my text so that I can get it to scale with the browser size (view port sie) and what CSS to use… or point me to where I can find or learn this.

The page I need help with: [log in to see the link]