-4

Bootstrap already makes the relative image responsive but the absolute images are not, when you switch to mobile a reduces the screen size on the browser, the other images are misplaced.

.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>
user438383
  • 5,716
  • 8
  • 28
  • 43
KoutCode
  • 1
  • 1
  • Why you use position absolute for images? – Sfili_81 Jul 29 '21 at 12:16
  • Because I want them to be positioned on top of the main image at a specific position just like this UI on dribble: https://dribbble.com/shots/11276631-DS-Personal-Developer-Portfolio/attachments/2884963?mode=media – KoutCode Jul 29 '21 at 12:38

1 Answers1

0

You can use CSS media queries to make your image responsive so that it can be accurately viewed by all your users. Please add the code to your below:--

/*for laptop/PC*/
    @media (max-width: 1400) {
    /*Applies to all the img html tag*/
      img {
        width: 100%;
      }
    }  
/* For tablets */
    @media (max-width: 800) {
    /*Applies to all the img html tag*/
      img {
        width: 80%;
      }
    }   
/* For Mobile Phones */
    @media (max-width: 400) {
    /*Applies to all the img html tag*/
      img {
        width: 80%;
      }
    }
Aryan R.H
  • 7
  • 1
  • 2
  • Thanks, i will try it now – KoutCode Jul 29 '21 at 12:38
  • I tried it, it started responsive until 992 widths. When it reaches 991 widths, the relative image goes down and the absolute images stay up on top of the content. see those screengrabs: https://ibb.co/YdfB5r5 https://ibb.co/0f50KyL – KoutCode Jul 29 '21 at 13:03