user3428516 user3428516 - 28 days ago 15
CSS Question

HTML CSS image responsive website

What it should look like

enter image description here

Hey I'm trying to make a responsive website and when I change the size of the screen as the background changes size the image comes off the bottom and changes the verticle location. Help would be appreciated.

<div class="imagess">
<img style="margin-left: 400px; margin-top: -103px; " src="images/Phone.png"/>
</div>
.imagess {
position: relative;
width: 100%; /* for IE 6 */
}

Answer

You could make use of css calc() function to set top positioning of element as below.

.imagess {
   position: relative;
   width: 100%;
   height:800px;
   overflow:hidden;
   background:#111;
}
.imagess > img{
  position:absolute;
  width:200px;
  height:300px;
  right:0;
  top:calc(100% - 90%);
}
<div class="imagess">
  <img src="https://source.unsplash.com/random">
</div>