Design comparison
Solution retrospective
Hello!
I'd really appreciate any feedback on this project.
Some questions and challenges came up while building: • Did I overcomplicate this by using Flexbox? • I struggled to center the flex-container div vertically and horizontally. I ended up using position:absolute, after trying with Flexbox for a while. Is it okay to mix the two techniques together? Is there a more efficient way? • I'm not sure if I used Media Queries properly. I found it especially hard to make this responsive at 375px screen size and struggled to adjust the flex-container div width as well as font size.
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done.
- Why are there two bodies in your html? This is causing issues with your page.
- Why is `` inside your css?
You can do this very easy with flexbox no need to use position. Apply these on the body
/* this will place the card in the middle of the page */ body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Marked as helpful0@odpagePosted over 1 year ago@hitmorecode thanks for taking the time to leave feedback. I'll try this out.
What do you mean by two bodies? I can only see one.
0@hitmorecodePosted over 1 year ago@odpage strange when I first opened there were two bodies 😅. The style inside css, is there a reason why you have it there? Normally it doesn't belong inside the css file.
0 - @QuellerisPosted over 1 year ago
Hi, using flexbox to center content on the screen is perfectly fine and it is a much better solution than using position absolute, as it will make layout more responsive. If you want to center the component, you can use
display: flex
on body element, like this:body { min-height: 100vh; display: flex; justify-content: center; align-items: center; }
Also consider using
rem
units instead ofvw
for setting width of the component.Great job on this challenge and happy coding.
Marked as helpful0@odpagePosted over 1 year ago@Quelleris thanks very much for your feedback.
Is there an ideal use case for rem versus vw? Between %, em/rem and vw/vh I'm struggling to know which is best for which purpose...
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