Skip to content
Submitted about 2 years ago

QR code component solution

MsIndy•20
@Msindy
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

I have difficulties with working out media queries. I cannot seem to figure it out.Feedback is highly appreciated

Community feedback

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

    Hi @Msindy, good job for completing this challenge! 👋

    Here are some more suggestions to improve your code:

    Instead of:

    <body>
   <div class="contain">
   </div>
<body>

    Try using:

    <body>
   <main  class="contain">
   </main>
<body>

    • Instead of using px in font-size use relative units of measurement like rem or em, the font size not be px because in some browsers the user with limited vision cannot change the font size, using px in fonts does not provide web accessibility, try using font-size: 0.938rem

    • Don't use <br>, these are read by screen readers and mess up the reading flow of the content, you can use padding or some other property

    • The container is not center. If you want to center an element, you can use flexbox to center things:

    body {
   width: 100%;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}
    • width: 100% take the full width of the element(screen)
    • min-height: 100vh means the height of the body element is equal to 100% of the viewport height.
    • display: flex is used to set the layout of the element to flex.
    • flex-direction: column; this defines the direction the flex items are placed in the flex container
    • justify-content: center align the flex item at the center of the container horizontally.
    • align-items: center align the items vertically.

    And remove margin: 40px; from the body selector

    More info here: https://www.w3schools.com/howto/howto_css_center-vertical.asp

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/

    And update this:

    .image-qr-code {
    background-color: hsl(0, 0%, 100%);
    padding: 10px;
    border-radius: 20px;
    max-width: 350px;
    text-align: center;

    /* margin: auto; */
    /* display: block; */
    /* justify-content: center; */
    /* align-items: center; */
}
    • The <p id="footer"> needs to be wrapped in a Footer Element, for example
    <footer class="attribution">
  <p>Challenge by ... </p>
</footer>

    I hope those tips will help you.

    Good Job !

    Marked as helpful
    0
    MsIndy•20
    @MsindyPosted about 2 years ago

    @MelvinAguilar Thank you so much, Melvin. Your input is very insightful and helpful. I have made the corrections per your advice and it works perfectly. Thank you for taking out the time to help review and point out my mistakes .

    0
  • Kakeru•265
    @adeleke5140Posted about 2 years ago

    Hi Misindy, great submission. I looked through your codebase and it seemed that the styles for the heading and text did not apply. This is in reference to the font-weight and width properties. Also it doesn't seem like the font-family was applied. You should check them and see why they aren't working.

    What do you need help with in regards to media queries?

    Marked as helpful
    0
    MsIndy•20
    @MsindyPosted about 2 years ago

    @adeleke5140 Thank you. I have applied the font family and its corresponding properties. Thank you.

    With regards to media queries, let's just say I need some tutorials. I am self-taught.

    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