While Bootstrap ensures that relative images are responsive, absolute images may not be. This can cause alignment issues when the browser window is resized on mobile devices.
.title-img {
position: relative;
width: 100%;
height: 100%;
}
.skill-back {
position: absolute;
bottom: 25%;
top: 10%;
right: 6%;
width: 50%;
height: 100%;
opacity: 0.5;
z-index: -1;
}
.html {
position: absolute;
z-index: 4;
width: 15%;
height: auto;
top: 450px;
left: 75%;
}
.css {
position: absolute;
width: 10%;
top: 70%;
left: 52%;
z-index: 3;
height: auto;
}
.js {
position: absolute;
width: 8%;
left: 79%;
top: 38%;
z-index: 1;
height: auto;
}<div class="profile col-lg-6">
<img class="skill-back" src="images/skill-back.svg" alt="black-circle">
<img class="html" src="images/html-skill.svg" alt="html-skill">
<img class="js"src="images/js-skill.svg" alt="">
<img class="css"src="images/css-skill.svg" alt="">
<img class="title-img" src="images/developerboy.svg" alt="developerboy">
</div>