Отзывчивый текст на фото не работает

Question

У меня возникли проблемы с изменением размера текста вместе с изображением. Я пробовал вмешиваться с высотой% и т. Д., Но это не работает.

Редактировать: Я редактировал свой CSS, чтобы включить @media only screen and (max-width: 480px) but the text disappears when I resize the browser. Может ли кто-нибудь помочь?

<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

Например, вы можете изменить

размер шрифта: 40px; до размера шрифта: 2.500em;

Существует также онлайн конвертер проверить пикселей в эм-s

http://pxtoem.com/