Skip to content
Submitted about 2 years ago

Responsive QR code card component using flexbox

Muhammad tehseen•340
@tehseen01
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

feedback welcome in advance

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted about 2 years ago

    Hi @tehseen01 👋, good job completing this challenge, and welcome to the Frontend Mentor Community! 🎉

    Here are some suggestions you might consider:

    With semantic tags:

    <body>
   <main>
      <article class="container">
         . . .
      </article>
   </main>
<body>
    • Centering the element with position would make your element behave strangely on some mobile devices. There are two modern CSS techniques to center elements instead of using the position property:

    Using flexbox layout:

    body {
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

    Using grid layout:

    body {
   width: 100%;
   min-height: 100vh;
   display: grid;
   place-content: center;
}

    Links with more information:

    .

    • Instead of using pixels in font size, use relative units of measure like rem or em. The font size in absolute length units (px) does not allow users with limited vision to change the text size in some browsers. Reference.

    I hope those tips will help you.

    Good job, and happy coding!

    Marked as helpful
    1
  • Vanza Setia•27,775
    @vanzasetiaPosted about 2 years ago

    Hi there! 👋

    Congratulations on completing your first Frontend Mentor challenge! 🎉

    Here are some suggestions for improvements.

    • The alternative text of the QR code should not be hyphenated (like code).
    • Also, it should not contain the word "image". The semantic meaning of the img element is already enough.
    • I recommend taking a look at "Quick tip: Using alt text properly - The A11Y Project".
    • Use the body element as the main element or the page for the website. So, there's no need to style the html element.
    • It's best to not style html element because it can overwrite the user's setting.
    • Currently, only the body element has box-sizing: border-box. If you want to make all elements have that behavior, use a universal selector instead.
    • To place the card in the center of the page, I recommend using flexbox or grid. These modern techniques are more robust than absolute positioning and require less code to implement.

    I have three recommended videos. The first one tells how hard HTML is (HTML is not easy). The other two talk about modern CSS techniques and approaches.

    I hope this helps! Happy coding!

    Marked as helpful
    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