Submitted almost 2 years ago

QR-Code HTML5 CSS3

PadseFIAE• 70

@PadseFIAE

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

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.

Community feedback

Adriano• 34,090

@AdrianoEscarabote

Posted almost 2 years ago

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

PadseFIAE• 70

@PadseFIAE

Posted almost 2 years ago

@AdrianoEscarabote Hello Adriano, thank you for the nicely Words, too. :-) I'm fine and i hope u to!

I will heed your tip and implement it in future projects.

Best regards Patrick :-)

Abdullah Yakub• 40

@developerabz

Posted almost 2 years ago

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

PadseFIAE• 70

@PadseFIAE

Posted almost 2 years ago

@developerabz Thank u for your nicely words. Yes i forgotten the alt="" text on the IMG. Thanks for this hint and thank your very much for the hint with margin-top auto for the footer :)

Please log in to post a comment

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