Div moving after resizing - html

Question

This is what i want to achieve ^ (this is the view on an iphone5 320x568)
But when i resize the window (to iphone 6 375x667 ) i get this
HTML:
<div id="container">
<div class="slicedimage">
<div class="textboxtransparant">
<h2>Since 1928</h2>
<div class="divider"></div>
<br/>
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna.
</p>
<i class="fa fa-angle-down fa-3x" aria-hidden="true"></i>
</div>
<div class="transparantblack"></div>
</div>
<div class="slicedimage">
<div class="textboxblack">
<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non
</p>
</div>
<div class="blacktransparant"></div>
<div class ="line"></div>
</div>
CSS:
body {
margin: 0;
padding: 0;
font-size: 16px;
/*font-family: Georgia;*/
font-family: sans-serif;
max-width: 640px;
color: black;
}
#container {
display: block;
height:900px;
width: 100%;
position: relative;
top: 50px;
margin: 0;
color: white;
text-align: center;
}
.slicedimage {
background-image:url('http://i.stack.imgur.com/yEQ6k.jpg');
width:100%;
}
.textboxblack {
background-color:black;
}
.line {
position: absolute;
width:1px;
height: 50px;
bottom: 80px; /*half the height*/
left: 50%;
border-left: 1px solid white;
}
.transparantblack {
height: 100px;
width: 100%;
background: linear-gradient(to bottom right, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
}
.blackgray {
height:300px;
width:100%;
background:linear-gradient(341deg, #8a8a8a 0%, #8a8a8a 31.9%, #000 32.1%, #000 100%);
}
updated the post and since stack overflow is asking me to add more information since my post is mostly code. Yeah u get the point, lets see if this is enough. "information"

Answer 1

Your goal was to keep the white line under the text, in the middle of the blacktransparent element.
To achieve this you need to make from the line element, a child of the blacktransparant div:
<div class="blacktransparant">
<div class="line"></div>
</div>
and set the blacktransparant to be relative:
.blacktransparant {
height: 100px;
width: 100%;
background: linear-gradient(to top left, rgba(255, 255, 255, 0) 49.9%, rgba(0, 0, 0, 1) 50.1%);
/* Add this */
position: relative;
}
After this you only have to set the arrow in the right place relatively to the blacktransparant div:
.line {
position: absolute;
width: 1px;
height: 50px;
/* bottom: 80px; Change to 25px */
bottom: 25px;
left: 50%;
border-left: 1px solid white;
}