Skip to content
Submitted over 2 years ago

QR-Code HTML5 CSS3

PadseFIAE•70
@PadseFIAE
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Pls let me know if i can make it better. I'm in a learning Prozess in HTML5 CSS3 and JavaScript.

Difficult was to center the Element in the middle of the Screen. display:flex and justify-content, align-items center doesnt work since i gave the element a height of 100vh. I dont understand this.

I am unsure of the footer. In scaling down, at a point the footer goes to the left. Doenst stay in the middle. Nice to know how i fix this professionally.

Code

Please log in to post a comment

Log in

Community feedback

  • Adriano•42,890
    @AdrianoEscarabote

    Hi PadseGaming, how are you? Welcome to the front-end mentor community! I really liked the result of your project, but I have some tips that I think you will enjoy:

    To improve the responsiveness of the project we can make a very important change!

    #card {
    max-width: 300px;
}

    Add a padding to the body, so that the content in lower resolutions doesn't hit the edge of the screen!

    The rest is great!

    I hope it helps... 👍

    Marked as helpful
  • Abdullah Yakub•40
    @developerabz

    Hey looks alright. Your img tag did trigger the html report for accessibility so make sure you add some alt="" text. Also, the card should be at least 10% larger on desktop. I checked on different screens and also scaled down the screen but I dont seem to be running into footer going to the left problem. Your footer seems to also be fine stuck to the bottom but you could in some situations also use 'margin-top: auto;' in the footer css to stick it to the bottom

    Marked as helpful

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