stop image jumping out of position when screen size reduced - css

Question

When I reduce screen size after running the code below, the image phone.png and all the text jump out of position. How can I stop this from happening.
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%;
}
styling for text
#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;
}
style for phone.png image:
#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>

Answer 1

You are using margin-top in percentages. However, percentages for margins are measured relatively to the window width, not the window height!
See http://www.w3.org/TR/CSS2/box.html#value-def-margin-width
Solution: use another unit to express the margin of the elements in, or use another way to position them on the screen (for instance top:5% in combination with position:absolute).