Design comparison
Solution retrospective
This is my solution to the Frontend Mentor QR component coding challenge. I initially started a junior project, but felt like it would be more appropriate to start smaller as I have very little experience.
Most of the challenge was pretty straightforward, but I struggled to get the component centered vertically. I wanted to use flexbox to do this, but I wasn't able to get it to work. Eventually I found a solution: setting the display on the body to flex, and centering it from there. In order to properly center it however, I did need to give the body a height of 100vh. It feels counterintuative to specify a height for the body. Are other solutions that are less complicated?
Community feedback
- @RadasinPosted over 1 year ago
That is the simplest solution to center something in the browser viewport. The body like any other element has a height set to auto by default, so when you set it to 100vh it has the full height of the browser viewport and the flex display can then center the content in the middle. You can use position relative or absolute to place items in center, but that is more complex.
Marked as helpful0 - @jrleijnsePosted over 1 year ago
Hey there! Great job completing your first challenge! 🎊
I have some suggestions for your code that might interest you.
HTML 📄:
- Instead of using the
<div>tag for your containers, try using some semantic HTML to provide more meaning to it, for better SEO. For example, instead of using<div>you could use the<main>or<section>tag. For the element with the classname attribution you could use the<footer>tag.
CSS 🎨:
- To make your solution responsive for different devices and screen widths, you can create a media query inside your CSS file and set the breaking point (i.e. the moment your media query gets triggered based on the width of the viewport). For example:
@media (max-width: 375px) { ***Place your CSS code here, just like you would in a regular CSS file***}.
For more information on this topic, you can read the following article: Media queries 📘
I hope you find my suggestions useful, and above all: the solution you provided is very good!
Keep it up and happy coding! 😃
Marked as helpful0@JoachimvdPPosted over 1 year ago@jrleijnse Hey, thanks for the feedback. The website you linked is really helpful, I will be sure to use it as a reference as I practice!
1 - Instead of using the
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