Skip to content
Submitted over 1 year ago

QR code component

Akshidhan•60
@Akshidhan
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

How do you align any element vertically in the center? I have used relative positioning; to center it vertically, I used left: 10% and right:10%. I have achieved what I want to achieve but is it okay to use it?

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Øystein Håberg•13,260
    @Islandstone89

    Hello, this is my feedback.

    HTML:

    • Remove the empty ````, which wraps the content (except for the footer and the header). For this simple project, here is what I recommend:
    1. Remove the first <div>
    2. Change the <section> into a <main>, and give it a meaningful class, like "qr-card".

    • The image must have alt text! Without it, screen readers will not understand what the content of the image is. The alt text should be descriptive, and in this example, it needs to tell where it leads (frontendmentor.io). Don't use words like "photo" or "image" - a screen reader will automatically announce <img> as an image.

    • "Improve your frontend skills" should be a <h1>.

    • .attribution should be a <footer>.

    • The footer text needs to be wrapped in a <p>.

    CSS:

    • Performance-wise, it's better to link to the fonts in the <head> of the HTML, not import it in CSS.

    • It is recommended to include a CSS Reset at the top.

    • Image needs display: block and max-width: 100%;. This is included in the mentioned CSS Reset.

    • Font-size must never be in px. Use rem instead.

    • Put text-align: center on the body, and remove it elsewhere. The result will be the same but with one less line of code.

    • Remove all fixed widths. Fixed dimensions are enemy number #1 when it comes to responsiveness.

    • Remove bottom: 10px; top: 10px; left: 10px; right: 10px;

    • Remove fit-content on width and height.

    • To center the card in an efficient way, use Flexbox or Grid. Personally, I used Flexbox, by putting the following on the body:

    display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;

    So, quite a lot of room for improvement, but this is how you learn - by doing challenges, getting feedback, implementing the feedback, and moving on, slowly and steadily.

    Good luck :)

    Marked as helpful
  • Yínx•320
    @Yinkajay

    Hello Akshidhan, to answer your question, there a variety of ways to center an element vertically, you can use the CSS Flexbox or CSS grid, and also the positioning method you said you used works as well. Looking at your code, I only notice fixed and absolute positioning though.

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