Submitted about 1 year ago

QRcard using html css

shankar405•10

@shankar405

A solution to the QR code component challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I completed the task next time will do it in more details

What challenges did you encounter, and how did you overcome them?

be able to finish what i started

What specific areas of your project would you like help with?

grid, responsive design

Code

Please log in to post a comment

Community feedback

Abdul Khaliq 🚀•72,380
@0xabdulkhaliq
Posted about 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have a suggestion regarding your code that I believe will be of great interest to you.
CSS 🎨:
- Looks like the component has not been centered properly. So let me explain, How you can easily center the component without using margin.
- We don't need to use margin to center the component both horizontally & vertically, Instead we should use Flexbox or Grid layout. You can read more about centering in CSS here 📚.
- For this demonstration we use css Grid to center the component.
```
body {
    min-height: 100vh;
    display: grid;
    place-items: center;
}
```
- Now remove these styles, after removing you can able to see the changes
```
.card {
  margin: auto;
  margin-top: 25%;
}
```
- Now your component has been properly centered
.

I hope you find this helpful 😄 Above all, the solution you submitted is great !

Happy coding!

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