Skip to content
Submitted over 2 years ago

QR Code component

Benolísio•60
@prettyBcoding
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 can I apply/create the design depending on the device's screen size?

Community feedback

  • Naveen Gumaste•10,480
    @NaveenGumastePosted over 2 years ago

    Hello Benolísio ! Congo 👏 on completing this challenge

    Let's look at some of your issues, shall we:

    -Warp your card content around the main tag Ex: 👇

    <body>
<main class="container">
*all you content here*
</main>
</body>

    happy Coding😀

    Marked as helpful
    1
  • Account deleted

    Hello there! 👋

    Congratulations on finishing your challenge! 🎉

    I have some feedback on this solution:

    • Always Use Semantic HTML instead of div like <main> <header> <footer> , etc for more info

    i hope this is helpful and goodluck!

    Marked as helpful
    1
  • Humas•250
    @dolomita28Posted over 2 years ago

    Hi, you could define a width to the bg div, so the card doesn't look so big. Then, use a padding for appliying the inner space between your card and image. You could also, instead of using margin to center containers (in this case the card), make use of flexbox. Hope it helps Best

    1
    Benolísio•60
    @prettyBcodingPosted over 2 years ago

    @dolomita28 Bro I read your feedback so I tried to do the challenge again using flexbox after reading an article about it on W3schools, but I couldn't do it... I think flexbox is a bit advanced for me 😅, but I keep studying it, so thanks for the tip

    0
    Humas•250
    @dolomita28Posted over 2 years ago

    @prettyBcoding yeeahhh, don't give up!!

    0
  • Grace•30,990
    @grace-snowPosted over 2 years ago

    You also need to

    • remove all widths and heights on this
    • remove position relative and top from the img
    • remove the huge margins
    • make the img display block and width 100%
    • set the card to have a max width only, no height
    • give the card some padding
    • give the body some padding or the card a little margin just to stop it hitting screen edges
    • to center the card vertically and horizontally on the page use css grid or flexbox properties along with min-height 100vh on the cards wrapping element

    Good luck

    0
  • Grace•30,990
    @grace-snowPosted over 2 years ago

    Hi

    You've removed an essential meta tag from the head that was in your starter html and controls how the solution scales on mobile. You need to put that back! This is tiny for me on iphone

    0
    Benolísio•60
    @prettyBcodingPosted over 2 years ago

    @grace-snow Hi! I didn't remove any meta tag 🤔. What's the meta tag?

    0
    Grace•30,990
    @grace-snowPosted over 2 years ago

    @prettyBcoding look at the starter files. It's right at the top of the supplied index.html

    You have removed it

    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