Vertical text alignment in a DIV - responsive text sizing

Question

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?

Look up CSS media query's and just change the font size based on screen size. — GifCo, Aug 25 '14 at 16:17
Perhaps forcing the text in just one line? `white-space: nowrap;` — LcSalazar, Aug 25 '14 at 16:22

score 0 · Answer 1 · answered Aug 25 '14 at 16:32

Yes, on texts you can use a "responsive" text size, if you use viewport units.

One of the supported values for that kind of unit is a percentage value, based on container's width, height, or both... Here's a sample of the concept: http://jsfiddle.net/t7b8ytrq/

{
    font-size: 2vh; /* size based on container's height */
    font-size: 2vw; /* size based on container's width */
    font-size: 2vmin; /* size based on witchever is smaller (width or height) */
    font-size: 2vmax; /* size based on witchever is higher (width or height) */
}

Read about the specs here: http://dev.w3.org/csswg/css-values/#viewport-relative-lengths

Vertical text alignment in a DIV - responsive text sizing

1 Answers1