Skip to content
Submitted 12 months ago

QR code component

Akshidhan•20
@Akshidhan
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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?

Community feedback

  • Øystein Håberg•10,710
    @Islandstone89Posted 12 months ago

    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
    0
  • Yínx•320
    @YinkajayPosted 12 months ago

    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.

    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