Design comparison
Solution retrospective
I used Flex while creating this. But I don't know if it was the correct approach. If anyone has a better and easier approach?
Community feedback
- @Bader-IdrisPosted over 1 year ago
You can set the container in the middle of the screen whatever user changes it when you add these properties to it in CSS:
.container { position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); }
the new feature is transform, it has many lovely properties you can discover, I personally love it. Hope it's useful
Marked as helpful0 - @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using
margin
orpadding
.
- We don't need to use
margin
andpadding
to center the component both horizontally & vertically. Because usingmargin
orpadding
will not dynamical centers our component at all states
- To properly center the component in the page, you should use
Flexbox
orGrid
layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css
Grid
to center the component.
body { min-height: 100vh; display: grid; place-items: center; }
- Now remove these styles, after removing you can able to see the changes
.scanner { margin: 7rem auto; }
- Now your component has been properly centered
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
Marked as helpful0 - @colormethanhPosted over 1 year ago
Hey many, although my solution wasn't perfect I found that using CSS Grid was an easier solution than CSS flex. The main benefit I found was that CSS Grid helps your align things and size objects a lot easier than flex.
You can try this Link to get more info on CSS Grid!
Marked as helpful0@tenthinPosted over 1 year ago@colormethanh Thanks, man... I will learn grid then !!!
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