Responsive Preview Card Component Using Flexbox
Design comparison
Solution retrospective
Hey guys, this is my 5th Frontend Mentor project. It's a responsive preview card component with 3 columns. Please take a look at my solution.
you feedback is valuable to me. thank you.
Community feedback
- @denieldenPosted over 2 years ago
Hi Shamil, great work on this challenge! π
Here are a few tips for improve your code:
- Tip of graphic design: with
font-family:" Big Shoulders Display ", cursive
the browser will use the Comics Sans font when it doesn't find the first font indicated (you can seen during loading)... for the designer it's a really awful font! I would rather replace it with afont-family:" Big Shoulders Display ", sans-serif
much more similar to the primary font. - remove all
margin
frommain .card
class because with flex they are superfluous - add
transition
on the element with hover effect - instead of using
px
use relative units of measurement likerem
-> read here
Overall you did well π Hope this help!
Marked as helpful0@shamilussaincPosted over 2 years agoHey @denielden , thank you for your feedback!
I have added transition to button hover. it's much better now π. I haven't noticed the font problem before. 'cursive' looks so different in Firefox from chrome. so i chooses 'sans-serif' as secondary as you said.
I have used margin for .card class to make card component suitable for mobile view. I think it's necessary for preventing component from touching screen edges. I would like to know your opinion about my approach on this.
your feedback is helpful to me. thankyouπ
1@denieldenPosted over 2 years ago@shamilussainc In the cabinet I would have put some padding on the edges of the body ... but that's okay as you did :) happy coding!
0 - Tip of graphic design: with
- @grace-snowPosted over 2 years ago
Hello
You have one big problem here - nesting css selectors. This is a common mistake when people first start using scss and results in hideously specific css selectors that will cause huge problems as you move to larger projects
The css compiled from scss should be exactly as if you wrote it directly. Single class selectors as much as possible
I recommend only nesting things thay belong to a class like
- media queries
- pseudo elements like :before
- pseudo states like :hover
Don't nest anything else
1
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