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

QR card

jsr7k 20

@jsr7k

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


My very first

Community feedback

Ecem Gokdogan 9,380

@ecemgo

Posted

Some recommendations regarding your code could be of interest to you.

  • In order to center the card easily and correctly, you'd better add flexbox and min-height: 100vh to the body
body {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
}
  • After adding them, you can remove margin-top and display: inline-block from the .card because you don't need them anymore
.card {
   /* display: inline-block; */
   /* margin-top: 150px; */
}

Hope I am helpful. :)

0

jsr7k 20

@jsr7k

Posted

@ecemgo Thank you so much for your recomendations they were very helpful. I'll apply them tonight.

1
Ecem Gokdogan 9,380

@ecemgo

Posted

@jsr7k happy to help :)

0

@skopelosbill

Posted

Well done jsr7k, like you I have just done this as my very first and did a similar job. I am also an older newbie. I am still trying to figure out the centring part of it, but I think you did well.

Skopelosbill

0
Anthony 10

@crossant123

Posted

Good Job for a first.

However the size is off, if you center the design vertically it makes it easier to compare the sizes. If you redo this challenge, I think you'll nail it!

0

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