Chat app CSS illustration

Community feedback

• 

  Manuel Victoria Sanmartín•160

  @manuviknPosted over 1 year ago

  Hello! nice job, I've realized that you have a little issue with the phone's notch position. In mobile sight you have a good design but in big screens it seems to be a bit off. With this little modification you can achieve the desired position:

  .user {

  position: relative;
  display: flex;
  align-items: center;
  background: linear-gradient(45deg, var(--Light_Violet), var(--Light_Magenta));
  border-radius: 1rem 1rem 0.5rem 0.5rem;
  padding: 1.5rem 0.5rem 0.5rem;
  justify-content: space-between;
  align-items: center;
  

  }

  .user::before {

  content: " ";
  background: var(--White);
  width: 10rem;
  height: 1.5rem;
  margin: 0 auto;
  border-radius: 0 0 1rem 1rem;
  position: absolute;
  left: calc(50% - 5rem);
  top: 0px;
  

  }

  -- Remove this media query -- @media (max-width: 500px) {

  .user::before {
  
  		left: 9.5rem;
  	top: 5rem;
  
  }
  

  }

  I hope this can help you!

  Marked as helpful

  1

  ---

  

  Elena-Laura•160

  @ElenaLaura366Posted over 1 year ago

  thank you <3 @manuvikn

  0