Making a div appear at the same position regardless of screen size

Question

I am developing a website for a client based upon Google material design (i.e. heavy use of cards).

What I am wanting is to have the first card of the page be constantly peeking just above the bottom of the screen at the half way point of the floating action button like in the image below.

My problem is that this does not work well when the site is being viewed on different devices with screen resolutions. I have tried using percentage and em's to pad this card from the top but these have failed and the card changes position. My remaining option would be to use media queries but this would potentially prove to be convoluted.

The following is the CSS for the card as it currently exists:

#content-card
{
    position: relative;
    display: table;
    background-color: white;  
    top: 0;
    left: 0;
    right: 0;    
    width: 100%; 
    overflow: hidden;
    box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.3);
    z-index: 2;
    height: auto;
 }

Any advice and insight into how I could achieve the desired effect is welcome.

Thanks :)

Basic jfiddle implementation as requested :- https://jsfiddle.net/7fudv084/1/

Answer 1

Use vw (viewport width) instead of percentage. 1vw = 1/100th of the viewport width - regardless of device PPI, etc. So, if you want the div to remain proportionally fixed regardless of device size and scren resolution - set your horizontal axis position with VW.

Example:

.somediv{ margin-right:20vw}