Responsive text on image not working

Question

I'm having trouble getting the text to resize along with the image. I tried meddling with the height % etc, but it doesn't work.

Edit: I've edited my CSS to include @media only screen and (max-width: 480px) but the text disappears when I resize the browser.Can anyone help?

<div class="container-fluid">
    <div class="row feature">
        <img alt="Women Digital Nomads" class="img-responsive" src="images/Homepage%20Banner.jpg">
        <div class="feature-text col-xs-12 col-md-8 col-lg-6 col-md-offset-2 col-lg-offset-3">
            <p>Masthead</p>
        </div>
    </div>
</div>

CSS

.feature-text {
    position: absolute;
    top:0;
    bottom: 0;
    font-size: 0;
    overflow: hidden;
}

.feature-text:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.feature-text p {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    color: white;
    font-size: 40px;
    font-weight: bold;
    padding: 3%;
    line-height: 50px;
}

@media only screen and (max-width: 480px) {

   .feature-text p { 
       font-size: 1em; 
    }

}

You can try with em instead of px. http://stackoverflow.com/questions/609517/why-em-instead-of-px — christian, Jun 01 '16 at 13:34
possible duplicate http://stackoverflow.com/questions/15649244/responsive-font-size In short, text isn't responsive in the way images are. You have to explicitly set the font-size at different break points. — jmbertucci, Jun 01 '16 at 13:43
I've included the @media only screen, but the text disappears now when i resize the browser. Did I enter the code correctly? — xtjnrchris, Jun 01 '16 at 14:08
@jmbertucci What if you use viewport units in font size, isn't that responsive? — Ricky Ruiz, Jun 01 '16 at 14:11
@RicardoRuiz That's a great point. I never think of VM's. Here's https://css-tricks.com/viewport-sized-typography/ and it looks like it's reasonably supported by modern browsers http://caniuse.com/#search=vm Good call. +1 — jmbertucci, Jun 02 '16 at 03:10

score 0 · Answer 1 · answered Jun 01 '16 at 13:37

0

For example you can change

font-size: 40px; to font-size: 2.500em;

There is also a online convertor to check your pixels in em-s

http://pxtoem.com/

answered Jun 01 '16 at 13:37

christian

64
1
10

Responsive text on image not working

1 Answers1