Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Just plain css

#cube-css

@Pascal488

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Please guys let me know where i am wrong or any advice will be good.. :)Happy coding

Community feedback

@VCarames

Posted

Good job!

Some Suggestions:

Remove the padding from your body and add the following to center your card: min-height: 100vh; display: flex; justify-content: center; align-items: center;

Remove everything from your container class except, border-radius, background-color, padding and width. (Change you width size to 320px)

Change your h2 to h1 and have its font-size to 22px. You never want to skip heading levels; always start with h1.

Remove the max-width from your paragraph. You want to use margin/padding to get the style you want.

Keep up the good work.

Marked as helpful

1
Tom Goldingā€¢ 250

@ComanderPotato

Posted

Goodjob. I had a look at your code and was wondering about your flex properties in your .container class. If you were attempting to centre your container (QR code container) to the centre of the screen, you have to set the flex properties in the parent container. So the container will be centred depending on the height of the parent. So in your .container class remove margin: 0 auto; and the flex properties and put those flex properties in the body and set the height of the body to be 100vh.

Marked as helpful

1

Please log in to post a comment

Log in with GitHub
Discord logo

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