當屏幕尺寸縮小時，停止圖像跳出位置

當我在運行下面的代碼後縮小屏幕尺寸時，圖像phone.png和所有文本跳出位置。我怎樣才能阻止這種情況發生。當屏幕尺寸縮小時，停止圖像跳出位置

CSS：

<style type="text/css"> 
    #wrapperlp { 
     width: 100%; 
     height:700px; 
     margin-left:13%; 
     margin-top:5%; 
     background-image:url(https://***/blackbg.png); 
     background-repeat:no-repeat; 
     opacity:1; 

    } 

    #designbg { 
     background-repeat:no-repeat; 
     margin-left: 5%; 
     padding-top: 3%;   
    }

造型文本

#ad_head {   
     color: #f2852d; 
     font-weight: bold; 
     margin-left: 28%; 
     margin-top: -21.5%; 
     font-size: 21px; 
    } 

    #ad_message { 
     margin-left: 28%; 
     font-size:10px; 
     color:white; 
     font-weight:normal; 
    }

風格phone.png圖像：

#ad_logo { 
     height: 500px; 
     margin-left: 2%; 
     margin-top: -42%; 

    } 

    #logobtm { 
     margin-left: 2%; 
     margin-top: -42%; 
    } 
</style>

HTML：

<div id="wrapperlp"> 
    <div id="designbg"><img src="https://*****/image.png" /> 
     <div id="ad_logo"><img src="https://****phone.png" /></div> 

     <div> 
      <div id="ad_head">Text1<br />Text...</div> 
      <div id="ad_message">Text2</div> 
      <div id="logobtm"><img src="**.png" /></div> 
     </div> 

    </div> 
</div>

來源

2014-02-10 user3288249

你可以創建一個這樣的小提琴嗎？ [小提琴]（https://jsfiddle.net） –

創建於：http://jsfiddle.net/vCZy7/2/...其中的文字是？該死的！ – loveNoHate

文字顏色白色！ – user3288249