@manuvikn
Posted
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
@ElenaLaura366
Posted
thank you <3 @manuvikn
0
