Design comparison
Solution retrospective
This challenge was relatively easy based on what I already know about HTML & CSS. Styling this was pretty straight forward when it came to the fonts, font-sizes and the image. As well as keeping this responsive for desktop and mobile.
My process was to complete the layout before centering the design. Once it came to that did I hit my first speed bump. Centering elements on a page seems to be a simple process however I've always had difficutly figuring it out. From using different methods like flexbox, grid and the famous absolute position. I decided to use flexbox for this solution however in future projects I think I would try absolute positioning again to get a bit of a refresher and to challenge myself more.
Once I was done I had a look at my code again to clean it up and make it more efficient. Overall this was a fun and quick project to build and I am looking forward to the next one.
What is your best case in centering elements on a page? I would love to know how and why you use a particular process to do so.
Happy coding everyone! DevDan
Community feedback
- @ify47Posted over 1 year ago
You should move all the codes in your main css to body, also add a flex direction: column to it and make your min-height: 100vh, By applying these styles to the body element, you create a flex container that centers its child elements both vertically and horizontally, I hope this has been helpful. Overall, this is a good solution :)
Marked as helpful1@DevDan21Posted over 1 year ago@ify47 I tried it out and it works! Thanks so much for your help. Not only did you help to clean up my code a bit but also I've learnt something new. I appreciate that. Thank you! :)
0
Please log in to post a comment
Log in with GitHub
Join 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