Responsive Text auf dem Bild funktioniert nicht

Question

Ich habe Probleme, den Text zur Größe zusammen mit dem Bild zu bekommen. Ich habe versucht, mich mit der Höhe% etc, aber es funktioniert nicht.

Bearbeiten: Ich habe meine CSS bearbeitet, um @media only screen and (max-width: 480px) but the text disappears when I resize the browser. zu enthalten Kann jemand helfen?

<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; 
    } 

}

Answer 1

Zum Beispiel können Sie ändern

font-size: 40px; zur Schriftgröße: 2.500em;

Es gibt auch einen Online-Konverter Ihre Pixel in em-s

http://pxtoem.com/