Skip to content
Submitted about 2 years ago

QR Code Component Challenge

Taiwo Leshi•220
@demi05
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 found it difficut to make this page responsive. Any tips please? . I'd appreciate if someone tells me the best way to make the desktop view on a phone responsive

Community feedback

  • Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    👾Hello Taiwo Leshi, Congratulations on completing this challenge!

    ❓ Answering your question:

    Your solution is responsive but you have two problems, the alignment you've applied its not the best and you can see that the card start to move when the screen scales and you've used a big structure for the html. I'll give you some tips to improve it from the scratch:

    1.The approach you've used to center this card vertically is not the best way, because using margins you don't have much control over the component when it scales. My suggestion is that you do this alignment with flexbox using the body as a reference for the container.The first thing you need to do is to remove the margins used to align it, then apply min-height: 100vh to the body to make the child (the card/container) align to its size that now will be displaying 100% of the viewport height and then give its alignment with display: flex and align-items: center / justify-items: center.

    2.A best practice to have all the image inside the container scaling and respecting the size of the container, you need to add max-width: 100% and add alsoobject-fit: cover to make the image auto-crop when resizing inside the column:

    img {
    display: block;
    object-fit: cover;
    max-width: 100%;
}

    3.The html structure is fine and works, but you can reduce at least 20% of your code cleaning the unnecessary elements, you start cleaning it by removing some unnecessary <div>. For this solution you wrap everything inside a single block of content using <div> or <main> (better option for accessibility) and put inside the whole content <img> / <h1> and <p>.

    <body>
<main>
<img src="./images/image-qr-code.png" alt="Qr Code Image" >
 <h1>Improve your front-end skills by building projects</h1>
<p>Scan the QR code to visit Frontend Mentor and take your coding skills to the next level</p>
</main>
</body>

    Here'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
    3
    Taiwo Leshi•220
    @demi05Posted about 2 years ago

    @correlucas yes this will really help me. Thank you so much 😁

    1
    Lucas 👾•104,340
    @correlucasPosted about 2 years ago

    @demi05 Hey Taiwo, I'm happy to hear that. Then say me if you reach the result yiu wanted with the responsiveness. Keep it up.

    0
    Taiwo Leshi•220
    @demi05Posted about 2 years ago

    @correlucas It really did. Thanks so much

    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