Design comparison
Solution retrospective
What I found difficult while building the project was the css portion. The spacing was a little hard for me to get accurate.
Other than the css, I was pretty aware of what to do with my code.
I would love to know best practices when ensuring my components are in their appropriate divs and I would like to have some resources that can help me with my css knowledge.
Community feedback
- @msunjiPosted over 2 years ago
Heya Joshua! This solution looks great! 👍
I've got a couple of suggestions, but I'll try to keep em' brief:
- You can move the
attribution
div out of thecontainer
div. Understandably, this'll look a little strange at first because you've gotbody
set todisplay: flex
. To sort this out, set theflex-direction
tocolumn
and theattribution
div should sit right below your QR container div. Once that's sorted, you could add a bottom margin to yourcontainer
div to add a tiny bit of spacing between the two elements. - We can clean up your code and sort out the
container
div's sizing by setting amax-width
. I had a look at the Figma files and it looks to be around320px
. Yourcontainer
div should look something like this:
.container { width: 100%; // alternatively, you could use vw units, so you could do something like: // width: 90vw; (or any value you think looks best) instead max-width: 320px; padding-bottom: 2.5rem; margin-bottom: 1rem; }
With this set, you can remove the media-query blocks for your
container
div. I think that should help clean up your CSS a tiny bit.As for CSS resources, I highly recommend Kevin Powell's Youtube Channel. He's got a whole range of videos about responsive design and getting started with CSS.
Hope this helped!
Marked as helpful1@jcovington16Posted about 2 years ago@msunji Hey I do apologize for the late reply as I am just now seeing this. This is amazing feedback and I really do appreciate you taking the time out to give me some great feedback. I definitely need to take advantage of the figma files. I think I have a misunderstanding on how to actually utilize these files to my advantage while I'm trying to re-create something.
Kevin Powell is amazing and I hate I don't watch his channel enough. I'm more of a backend engineer and I want to get better at building a full stack application from beginning to the end. In order for me to do this I know I have to get better with developing the frontend and not depend on something like tailwinds or bootstrap. Once again thank you so much for the feedback. This was definitely helpful.
0 - You can move the
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