Manav• 390
@manav-sharma69
Submitted
What challenges did you encounter, and how did you overcome them?
Designing that share box (for desktop design) was something I did for the first time. It was challenging. Now it looks fairly simple. Although, it's a bit hacky 😅
What specific areas of your project would you like help with?
@media (min-width: 769px){
...
.popup{
justify-content: center;
position: absolute;
bottom: 90%;
right: -2vw;
left: 23vw;
background-color: var(--very-dark-grayish-blue);
padding: 1.25rem 2.5rem;
border-radius: 10px;
}
.icon:hover{
cursor: pointer;
}
button::before{
display: var(--btnStyle);
position: absolute;
bottom: 80%;
right: 7%;
content: "";
inline-size: 0;
block-size: 0;
border-top: 10px solid var(--very-dark-grayish-blue);
border-inline: 10px solid transparent;
}
}
@media (min-width: 920px){
.popup{
right: -4vw;
}
}
@media (min-width: 1040px){
.popup{
right: -6vw;
}
}
@media (min-width: 1080px){
.popup{
right: -20%;
left: unset;
}
}
This is styling I added to make that share box responsive. If there's a better way to design the component with shorter/better CSS, please share in the comments.
