Design comparison
SolutionDesign
Solution retrospective
- Fundamentals are important. Again. When I needed to wrap
img
indiv
I could see that for some reason thediv
was taking more vertical space than the image inside of it and that's totally unlogical and bs but trying to find some info why is that I founded logical explanation: because ofdisplay: inline
property. More about it here. - Used Sass primarily for nesting and more clean variables usage(no
var()
). Don't know why nesting took so long to implement in main specs but it is coming. - Neat trick to use even though it's a little bit clunky:
@media (hover: hover) and (pointer: fine) {
.image:hover {
opacity: 1;
}
}
So the hover will work only on devices with pointer and not in phones.
Community feedback
- @matryoshaPosted over 1 year ago
- Decrease title font size -- ✔
- Make avatar border width smaller -- ✔
- Description font size should be bigger --✔
- Border radius is bigger --✔
0
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