@alekseibodeev
Posted
Hi 👋 Nice solution!
Here are somethings to improve:
Mobile tooltip
There is layout shift on mobile when toggling tooltip. This happends because you changingdisplay
property on <figure>
element and removing padding-bottom
on .card
. The easiset way to avoid those shift is to use positioning properties:
@media (max-width: 600px) {
.card .mobile-active {
/* don't touch padding here */
}
.mobile-active figure {
/* don't touch display property here */
}
.person-info {
position: relative;
}
.mobile-active .share {
position: absolute;
inset: 0;
/* width: 100%; you don't need this anymore */
/* you other styles */
}
}
Code snippet above will fix layout shift but you still have to adjust it a bit to look nice.
Code style
I would recomment to avoid using type selectors for specific styles. Use it only for resetting/normalizing CSS. For example, you have display: none
applied to ul
. What if you need another ul
on the page? You will need to overwrite display
property for each new one.
JavaScript Variables
For this small project this makes no difference, but it's good prectice to avoid var
keyword since it can introduce bugs later on. Use const
for all unchanging variables/refferences and let
for anything else.
I hope that was helpful. Bye!
Marked as helpful
@Rabelahmed
Posted
@alekseibodeev thank you for the feedback