I'm struggling to figure out how to create a circular profile picture on a background image that remains responsive and maintains its position across different screen sizes.
Currently, I've been using fixed margin values to adjust the position, but I don't think it's the best approach. The alignment in the code snippet below is off. I'm unsure of how to code the width and height so that the profile pic stays in an ideal position on all screens. How should I set the margins or padding correctly? I've tried using col-sm and col-md with various parameters, but only col-md seems to work.
My desired output looks like this: https://i.stack.imgur.com/BX0ME.png
On iPhone X, the positioning of the profile pic and text is fine with the current code. https://i.stack.imgur.com/vMXZU.png
However, on iPad, the positioning is incorrect. https://i.stack.imgur.com/i7Dly.png
The position is also off on iPhone 5/SE.
https://i.stack.imgur.com/XDfWw.png
I've included a link to the JSFiddle for reference. Please provide assistance.
<style>
#sfitness{
position:relative;
}
* {
box-sizing: border-box;
font-family:Arial;
font-size:12px;
}
img {
width: 100%;
}
.prof{
width:90%;
position:absolute;
top:150px;
left:4%;
}
.user{
border-radius:75%; width:80px; height:80px;
}
.name, .pic{
float:left;
}
.name{
margin-left:-25px;
margin-top:20px;
}
.name span{
display:block;
text-transform:none;
font-size:8px;
}
.name p{
text-transform:uppercase;
font-size:10px;
line-height:10px;
}
.credit{
float:right;
margin-top:48px
}
.credit-pic{
width:10px;
height:10px;
}
</style>
</head>
<body id="sfitness">
<img src="https://image.ibb.co/byLwy9/profilepic.png" alt="profilepic" border="0">
<div class="container-fluid" style="">
<div class="row">
<div class="prof">
<div class="col-4 pic">
<img class="user" src="https://image.ibb.co/gGYzJ9/312eaeaba498116ab7c4cfb6ec22a049.jpg" border="0">
</div>
<div class="col-4 name">
<p>Jane Wong <span>Kuala Lampur</span></p>
</div>
<div class="col-4 credit">
<img class="credit-pic" src="https://image.ibb.co/e7UQRU/Asset_19_4x_8.png" /><span style="font-size:8px"> 0 credit</span>
</div>
</div>
</div>
</div>
</body>