We Keep Coding

Wrong element position on mouse hover

Currently, I'm creating a simple video player to practice. But, I'm facing something that I never saw before, something that I tried for hours find a way to fix but I didn't make it.
Here is my code =>
var left = document.getElementById('core').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
The problem is: when I hover the input bar, I'm getting wrong hovered position. After of many hours trying discover why this is happenning, I figured out that #time is, indirectly, causing this. The presence of #time is making the input bar probably show the wrong hover time. But I can't remove #time and I need the code in this structure, with divs wrapped. If you remove #time and test the code, you will see that the hover position will be correct.
Here is a screenshot of what I expect to happen =>
image (I cant yet add embed images)
I suspect that this is something related to flex property, and about position as well. But I tried everything to fix this and got no sucess. Could you please, help me understand or fix this?
Also, here is the jsfiddle link if you want => https://jsfiddle.net/9qvLd35a/
Thank you very much.

In your javascript you take the left-value from the entire core-div. But you only need the value from the progressZone. So you can just adjust it like this: var left = document.getElementById('progressZone').getBoundingClientRect() ...
var left = document.getElementById('progressZone').getBoundingClientRect().left - document.documentElement.getBoundingClientRect().left;
window.onmousemove = function (e) {
let x = ((e.clientX + window.pageXOffset) - left);
document.getElementById("thumbnail").style.left = (x + "px");
}
body {
overflow: hidden;
}
.container {
width: 100%;
max-width: 800px;
position: relative;
background-color: blue;
height: 200px;
overflow: hidden;
}
.core {
margin: 0;
display: flex;
position: absolute;
bottom: 4px;
width: 100%;
flex-wrap: nowrap;
height: auto;
}
#time {
font-size: 14px;
text-shadow: 0 1px 1px rgb(0 0 0 / 15%);
color: #fff;
align-self: center;
align-items: flex-start;
margin: 0 12px;
min-width: 45px;
text-align: center;
}
#progressZone {
width: 100%;
background-color: green;
position: relative;
}
#progress{
z-index: 1;
border-radius: 8px;
height: 2px;
width: 100%;
outline: none;
position: absolute;
top: 0;
bottom: 0;
appearance: none;
-webkit-appearance: none;
margin: auto;
background: transparent;
margin-right: 10px;
}
.thumbnail {
display: none;
z-index: 1;
position: absolute;
bottom: 30px;
right: auto;
margin: 0;
width: 12em;
height: 7em;
background: rgb(200, 200, 200);
pointer-events: none;
padding: 2px 2px;
transform: translateX(-50%);
left: 50%;
}
.thumbnail::before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
border: 8px solid transparent;
border-top: 8px solid rgb(200, 200, 200);
transform: translateY(-19%);
}
#progress:hover + .thumbnail {
display: block;
}
<div class="container">
<div id="core" class="core">
<div id="time">01:14:28</div>
<div id="progressZone">
<input id="progress" class="range" type='range' min="0" max="100" step="0.01" value="0">
<div id="thumbnail" class="thumbnail"></div>
</div>
</div>
</div>
And as far as I can see it, this should have solved the issue. I hope I got your problem right :)

Parent Div not adjusting size due to its child div

I am trying to load my HTML page into a container. However, when I try to load the HTML page, the container doesn't re-adjust its size to accommodate the Page. The contents of my page are still visible but they look like they are overflowing without the background of the container. I am new to WebDev and have no idea about this.
I have three containers. Container Big holds other two containers. ContainerMain holds navigation bar in it and I load page into containerPage whenever someone clicks the nav bar. I want containerMain and ContainerPage to look like a scrollable continous box at the center of container Big with some top and bottom margins but, whenever I load the page into containerPage, it fails to resize itself for the page (in this case, homepage).
<div id="ContainerBig">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
Here is css for my containers:
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#ContainerMain {
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 10%;
max-height: 77px;
border-radius: 5px;
position: absolute;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
top: min(20%,160px);
left: 10%;
right: 10%;
width: 80%;
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
position: absolute;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
And I'm trying to load the following webpage:
// Just in case you need it, the code I'm using to load the page is:
function changePage(page, context) {
$(".navItem").removeClass("active");
$(context).addClass("active");
var contain = $("#containerPage");
contain.slideUp("10ms", "linear", function change() {
contain.load(page);
contain.slideDown("10ms");
});
if ($(window).width() < 1126) {
var element = document.getElementById("nav");
element.style.display = "none";
}
}
body {
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
color: #777;
font-size: 13px;
}
#vertical_line {
position: absolute;
left: 69%;
bottom: 12%;
top: 12%;
border-left: 1px solid #c1c1c1;
}
.pic_owner {
top: 15%;
left: 3%;
width: 25%;
height: auto;
position: absolute;
border: white 10px solid;
border-radius: 10px;
}
.description_owner {
display: block;
position: absolute;
top: 8%;
left: 34%;
width: 33%;
line-height: 21px;
}
#more {
display: block;
font-weight: 400;
}
#heading {
color: #333;
font-family: HelveticaNeue, "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-size: 40px;
}
.social {
position: absolute;
top: 8%;
left: 72%;
right: 6%;
line-height: 21px;
}
.socialButton {
-webkit-appearance: button;
top: 10px;
width: 90%;
padding: 6%;
position: relative;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
text-align: center;
text-decoration: none;
margin-bottom: 5px;
}
.fa:hover {
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
opacity: 0.9;
}
.fa-instagram {
background: #E1306C;
}
.fa-linkedin {
background: #007bb5;
}
.fa-facebook {
background: #3B5998;
}
.fa-github {
background: #141414;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styleSheets/styleHomePage.css"/>
<script type="text/javascript" src="jss/homepage.js"></script>
</head>
<body>
<div id="content">
<img class="pic_owner" src="Resources/picture_aayush.jpg">
</img>
<div class="description_owner">
<h1 id="heading">DEVELOPER</h1>
<p><strong id="desc_detail">Loading.....</strong></p>
<p id="more">Loading....</p>
</div>
<span id="vertical_line"></span>
<div class="social">
<p id="addition"></p>
&nbsp
<a href="" class="socialButton fa fa-linkedin"
type="button">&nbsp Aayush Singla</a>
&nbsp
</div>
</div>
</body>
</html>
Please bare with me if this is a simple question. I am stuck on this from kinda week now.

update:
It looks to me like if you want both the header and the page content to scroll together, you need a container element with overflow: auto on it.
<!-- HTML -->
<div id="ContainerBig">
<div id="Container">
<div id="ContainerMain"></div>
<div id="containerPage"></div>
</div>
</div>
//CSS
#ContainerBig {
left: 0;
top: 0;
bottom: 0;
height: 100%;
width: 100%;
position: absolute;
}
#Container {
position: absolute;
top:10%;
left: 10%;
right: 10%;
width: 80%;
height: 80%;
overflow: auto;
}
#ContainerMain {
height: 10%;
max-height: 77px;
border-radius: 5px;
background-color: #262523;
border: 1px solid #111;
}
#containerPage {
height: auto;
padding-bottom: 5%;
margin-bottom: 10%;
display: block;
overflow: auto;
background-color: #fff;
border-radius: 0 0 5px 5px;
}
Here's a working pen: https://codepen.io/jacob_124/pen/ZEQoBxE?editors=1100
Note: It's a bad idea to rely on position absolute for layouts. Especially for when you don't have to. This layout could be easily accomplished with relative positioning.
Here's a pen with position relative: https://codepen.io/jacob_124/pen/BajxQbv

Aligning an image to the right of text

I want to align this image to the right side of the text but I am unable to do this. All the ways I have tried but in the end, the image appears below the text contrary to what I want actually.
In my assumption, I have written the correct code.
Please see the image here.
Here is what I have in my code:
<!--Intro Page start-->
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="images/undraw_growth_analytics_8btt.png" alt="">
</div>
</div>
</section>
And here is the CSS:
#intro{
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
#intro .intro-left{
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1{
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after{
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p{
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta{
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right{
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img{
max-width: 600px;
}
Please let me know where is my error. Thanks!

use flex for wrapper class:
#intro {
position: absolute;
overflow: hidden;
min-height: 600px;
padding-top: 9em;
}
.wrapper {
display: flex;
}
#intro .intro-left {
display: inline-block;
width: 100%;
max-width: 400px;
padding: 3em 0;
}
#intro .intro-left h1 {
font-size: 2.5em;
color: #241b57;
line-height: 1.5em;
position: relative;
margin-bottom: 1em;
}
#intro .intro-left h1::after {
bottom: -24px;
left: 0;
width: 50px;
height: 4px;
content: '';
border-radius: 5px;
background: #ec4357;
opacity: 0.4;
position: absolute;
}
#intro .intro-left p {
font-size: 1.125em;
line-height: 1.75em;
}
#intro .intro-left a.intro-cta {
font-weight: 500;
display: block;
width: 100%;
max-width: 180px;
margin-top: 2em;
text-align: center;
color: #ffffff;
border-radius: 3px;
background-color: #ec4357;
padding: 1em;
}
#intro .intro-right {
position: relative;
display: inline-block;
margin-left: 6em;
}
#intro .intro-right img {
max-width: 600px;
}
<section id="intro">
<div class="wrapper">
<div class="intro-left">
<h1>Creative Insights to Grow your Business</h1>
<p>The world's most widely deployed real-time content recomendations engine. Brought to you by Pulse Analytics.</p>
<a href="#" class="intro-cta">
Try it for Free
</a>
</div>
<div class="intro-right">
<img src="http://placekitten.com/301/301" alt="">
</div>
</div>
</section>

Pop up flowing out of a video container

I have simple HTML 5 video player, I have a function which opens a pop up when the current time is 0:07s, unfortunately, the pop on a small device flow out of a div.
Problem in graphic:
I want the popup to be centered in inside a video player in all devices like this.
Here is Plunker of what I am trying to do: HTML 5 Video Player
Here is HTML
<div class="video-container">
<div class="box1"></div>
<div class="box2"></div>
<video id="video1" class="video-js vjs-default-skin" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="lightbox popUpQuestion1">
<div class="row row-no-padding">
<div class="product-left-col">
<div class="product-main-pic">
<div id="imgContent">
<!-- Sinon si pas de coloris et pas de default Sku
-> Affiche le premier SKU. -->
<img id="popinMainPic" src="http://www.sephora.pl/media/catalog_ProductCatalog/m11470681_P2264_princ_medium.jpg">
</div>
</div>
</div>
<div class="product-right-col">
<div class="prodcut-title">
<H1>Rose Deep Hydration Moisturizer</h1>
</div>
<div class="description-text">
An ultra-hydrating gel cream powered
by hyaluronic acid and time-release
technology for petal-soft skin.
</div>
<div class="product-price">
<span>299,00 zł</span>
</div>
<a target="_blank" href="http://www.sephora.pl/Makijaz/Oczy/Kredki-do-oczu-i-khol/Mini-kredka-do-powiek/P2255003?skuId=315720">
<div class="buy-button animates-in show">KUP TERAZ </div>
</a>
</div>
</div>
</div>
</div> <!-- End of Container -->
Here is css I have so far
body{
background-color: #f0f0f0;
overflow-x: hidden;
margin: 0em 0em;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
font-weight: bold;
}
p{
margin: 0;
}
a{
text-decoration: none;
}
video{
width: 1266px;
height: 100%;
left: 0px;
top: 0px;
margin-left: 0px;
margin-top: 0px;
}
img{
float: left;
margin-right: 25px;
}
.container{
width: 100%;
margin: 0px auto;
overflow: hidden;
margin-top: 50px;
}
.descArea{
background-color: #fff;
box-shadow: 0 0 3px #c8c8c8;
padding: 15px;
box-sizing: border-box;
}
/* .videoArea{
position: relative;
} */
.video-container{
position: relative;
height: 100%;
width: 100%;
background-color: #000;
margin:0 auto;
}
.box1{
position: absolute;
background-color: rgba(40, 169, 220, 0);
width: 200px;
height: 200px;
top: 50px;
left: 630px;
cursor: pointer;
}
.box2{
position: absolute;
background-color: rgba(207, 50, 53, 0);
width: 200px;
height: 200px;
top: 70px;
left: 150px;
cursor: pointer;
}
.lightbox{
display: none;
}
.longBtns{
display: block;
}
.buy-button {
background-color: #555;
color: #fff;
font-size: 2em;
cursor: pointer;
width: 182px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* right: 10px; */
/* bottom: 41px; */
}
.product-modal{
background-color: #f5f5f5;
font-size: 1.2em;
width: 65em;
height: 46.3em;
}
.row-no-padding{
display: flex;
}
.sku-label-brand{
font-family: georgia;
letter-spacing: .2em;
}
.description-text {
margin-top: 1%;
line-height: 1.4;
/* font-size: 1.7em; */
/* width: 50%; */
font-size: 24.444px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
margin-bottom: 60px;
}
.product-right-col{
width: 60%;
}
.product-left-col{
width: 50%;
margin-right: 45px;
}
#popinMainPic{
width: 100%;
height: 100%;
}
.sku-link{
margin-bottom: 20px;
}
.product-price{
margin-bottom: 20px;
font-size: 36px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
}
.prodcut-title > h1{
font-size: 30.556px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
margin-bottom: 14px
}
.vjs-marker{
width: 6px !important;
border-radius: 30%;
background-color: white !important;
margin-left: -3.5px;
left: 29.2002%;
height: 6px !important;
border-radius: 100px !important;
bottom: 11px;
-webkit-border-radius: 100px !important;
-moz-border-radius: 100px !important;
-ms-border-radius: 100px !important;
-o-border-radius: 100px !important;
}
.video-js .vjs-big-play-button {
display: none !important;
}
.vjs-has-started .vjs-control-bar {
background: linear-gradient(to bottom,rgba(0,0,0,.1) 0,rgba(0,0,0,.69) 99%,rgba(0,0,0,.7) 100%);
}
.video-js{
width: 100% !important;
}
.video1-dimensions {
height: 100% !important;
width: 100% !important;
}
.featherlight .featherlight-content{
transform: scale(0.7);
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
}
I have tried to add overflow:hidden to parent div still the same.
What is wrong with my code? any idea or help will be apreciated.

featherlight basically provides you a window sized popup that has position: fixed and is set to be placed at center horizontally and vertically. If you look at the CSS of featherlight, then you'll see it has top: 0; bottom: 0; left: 0; right: 0;. This is the intended behaviour of this plugin.
Moreover, the way this plugin works is by cloning your modal content to its own div and then displaying it. Hence giving you little less control over its positioning.
To override this behaviour, you need to manually calculate top, left and height of the video and then apply this to .featherlight by javascript. This would force the featherlight modal to be displayed over the video only irrespective of the the device width/height.
Hope this helps.

CSS: responsive design, position card to fit in the middle any size of screen

I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)

Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}

I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)