I have a wordpress site and I am trying to vertically float text on top of a slider image.
I have hard-coded a single static, full width image on my slider widget using the following CSS.
.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 widget? A responsive text size somehow?