Floating Text on Slider Wide Widget

I have hard-coded a single static, full width image on the slider-wide widget using the following code. I then did a text overlay by entering my text via the Slider Wide widget on the Customize menu in WP Admin.

.slider-wide {
clear: both;
width: 100%;
height: 560px;
    background: url(http://photourl);
background-position: center;
background-repeat: no-repeat;
background-size: cover;	

}

Now for the question. While the text looks beautiful on a wide screen, when the browser window is reduced, or when viewing from mobile, the text overflows the slider image and overflows into other widgets.

Is there a way to lock this text into only the slider-wide widget? A responsive text size somehow?

Thanks in advance