Design comparison
Solution retrospective
Hi! This is my second challenge in Frontend Mentor. I think I should be using bigger sizes, will try that for my next challenge. I positioned the component over the background image using position: absolute and hardcoding the distance from the left and top edges of the screen, don't know if that's the best way to do it so I would love to get some feedback on that. Thanks!
Community feedback
- @ChristopherParkePosted over 2 years ago
Hi Lorenzo. Looks great! And hardcoding sizes is fine, and in many cases preferred. Responsive sizes are for things that are supposed to change as the browser moves. The tricky part is knowing what's ok to hardcode, and what needs to be a responsive size.
The general rule I go by is have containers be responsive, but have assets remain in pixels. I've found a lot of success with this.I used to use responsive sizes for almost everything, and found it almost always ended up wonky. It would almost make it so that everything on the page moved around too much.
So to sum up, some stuff should resize itself dynamically, and some stuff shouldn't. You made good choices as to what should and shouldn't here.
The only thing I see, is that on the live version, your card doesn't stay centered. You could fix this by containing your ".component" div inside another div with ".container" class. You could then make the .container class have display: flex, and justify-content: center; I think that would probably solve it.
Marked as helpful1@LorenzoChioPosted over 2 years ago@ChristopherParke Thanks for the feedback Chris! I'll keep it in mind for my next challenges and projects. I'll get back to this challenge later to fix the issue you pointed out.
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