profile component

Community feedback

• 

  JuvoGenesis👾•2,010

  @AkoToSiJeromeEhPosted 6 months ago

  Hey ! Great work out there i just notice that the image avatar are not aligned horizontally , you are correct through the usage of position : absolute and position : relative but the reason why its not working is because of the placement of position : relative that is on the .image-container but it is spanning from start through end that's why when you use left or right the image avatar will place on the start , to fix this you should add the position : relative in the .inner-wrapper by adding this the image avatar will aligned horizontally . thats all happy coding !!!

  .inner-wrapper {
    border-radius: 15px;
    overflow: hidden;
    position: relative; // add this 
  }
  

  .image-container {
    position: relative; remove this
    width: 326px;
    height: 140px;
  }
  

  #Victor {
    position: absolute;  // remove this
    top: 35%;  // remove this 
    left: 15%;  // remove this
    margin-left: 160px; // remove this
    transform: translate(-50%, -50%); // remove this
    z-index: 1;
    border-radius: 50%;
    border: 4px solid #fff;
    background-position: right 50vh,bottom 40vh,top 40vh, left 50vh;
    left: 0; // add this
    right: 0; // add this
    margin: auto; // add this
    top: 5rem; // add this and you can adjust this 
  }
  

  0