Design comparison
Community feedback
- @alekseibodeevPosted 3 months ago
Hi 👋 Nice solution!
Here are somethings to improve:
Mobile tooltip
There is layout shift on mobile when toggling tooltip. This happends because you changing
display
property on<figure>
element and removingpadding-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 toul
. What if you need anotherul
on the page? You will need to overwritedisplay
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. Useconst
for all unchanging variables/refferences andlet
for anything else.I hope that was helpful. Bye!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord