QR Code Component | Custom Properties, Translate

Solution retrospective
I had difficulties centering the card horizontally and especially vertically! Not sure about the flexbox stuff, it was my first contact with this subject.
Is it possible to center vertically without using flexbox?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @md5dalton
Hello Thullyo Damasceno 👋
Your implementation of flex box to center the content vertically and horizontally if fine. However, let me suggest you use
min-height
instead ofheight
because the former means that the element's height should be at least that high but may increase if the content needs more room. Here's how I'd modify the styling on the body element:body { .... /* height: 98vh; */ min-height: 100vh; margin: 0; }
There are several approaches that we can use to achieve this but we'll go through only 2 more below:
- Grid
- Position
Grid is also an excellent way to go. It makes use the
place-content
property which combinesalign-content
andplace-content
to center content perfectly in the middle of the page.body { min-height: 100vh; display: grid; place-content: center; }
Last and least would be the use of
position
andtranslate
properties but I recommend you stick with flex box instead:body { position: absolute; top: 50%; left: 50%; translate: -50% -50%; }
I hope that gives you and idea on which you can choose on your next projects. 👌
Marked as helpful - @correlucas
👾Hi Thullyo, congratulations on your solution!👋 Welcome to the Frontend Mentor Coding Community!
Great solution and a great start! From what I saw you’re on the right track. I’ve few suggestions for you that you can consider adding to your code:
1.Replace the
<p>
containing the main title with<h1>
note that this title is the main heading for this page and every page needs one h1 to show which is the most important heading. Use the sequence h1 h2 h3 h4 h5 to show the hierarchy of your titles in the level of importance, never jump a level.2.Add the
alt text
to improve accessibility.The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of a slow connection, an error in the src attribute, or if the user uses a screen reader). ---><img src="./images/image-qr-code.png" alt="QR Code Frontend Mentor">
3.Use relative units like
rem or em
instead ofpx
to have a better performance when your page content resizes on different screens and devices.REM
andEM
does not just apply to font size, but all sizes as well. To save your time you can code your whole page usingpx
and then in the end use a VsCode plugin calledpx to rem
to do the automatic conversion or use this website https://pixelsconverter.com/px-to-remHere's my solution for this challenge if you wants to see how I build it: https://www.frontendmentor.io/solutions/qr-code-component-vanilla-cs-js-darklight-mode-nS2aOYYsJR
✌️ I hope this helps you and happy coding!
Marked as helpful - @vanzasetia
Hello, Thullyo! 👋
Congratulations on completing your first Frontend Mentor challenge! 🎉
There are multiple ways to center an element in the middle of the page. I recommend reading the "The Complete Guide to Centering in CSS | Modern CSS Solutions". Right there, you can find different ways to center a
div
.I have some feedback on this solution.
img
element must havealt
attribute. The QR code is an important content of the page. So, it needs an alternative text.- For the
container-title
, swap thep
tag withh1
. Each page needs oneh1
. - I recommend adding
rel="noopener"
to any anchor tags that havetarget="_blank"
. It helps protect users of legacy browsers. I suggest reading the web.dev article to learn more about this.
That's it! I hope this helps!
Marked as helpful
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