この画像をページサイズに応じて反応させるにはどうすればいいですか？

私のページはデスクトップでうまく見えますが、他のどのデバイス（電話、タブレット）でも見ると、他のコンテンツに下に移動しました。画像のようにテキストが縮小するようにする方法はありますか？ここでこの画像をページサイズに応じて反応させるにはどうすればいいですか？

は私のHTMLです：ここでは

<div class="hero"> 
     <img src="resources/assets/home_header.png" alt="youth futures header"/> 
      <div class="text"> 
       <h1>Hi</h1> 
       <p class="textstyle2">14 WARM BEDS. YOUTH 12-17.<br/>YOUR TEMPORARY HOME:)</p> 
      </div> 
    </div>

はCSSです：

.hero { 
width:1280px; 
    margin:0rem auto; 
    position: relative; 
} 

.text { 
position: absolute; 
top:50%; 
left:0; 
padding:1rem; 
transform:translateY(-50%); 
text-align:center !important; 
margin: 0px 197px 103px 531px; 
}

出典

2017-03-08 smithky3