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 code component hub with html & css

@sofiamatrella

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


This is the first time I make something with html & css after learning it for 2 days, so it's not perfect hahaha. I had trouble with aligning vertically the white box that contains the image and the text (tried using flexbox and other methods, neither of them worked without a specific height so I had to specify it and because of that it's not responsive, not sure of how to do it correctly :( ) All feedback is welcome, thank you!

Community feedback

Abdul 8,540

@Samadeen

Posted

Hey!! Cheers 🥂 on completing this challenge.. .

Here are my suggestions..

  • You should use <main class="container"> instead of <div class="container">.
  • To Align but vertically and Horizontally you can use flex box and some of it properties e.g
  1. display: flex;
  2. align-items: center;
  3. justify-content: center;

This should fix most of your accessibility issues

. Regardless you did amazing... hope you find this useful... Happy coding!!!

Marked as helpful

0
Oshu 630

@oshudev

Posted

Hi Sofía Matrella, great job!

Add the main tag and wrap the card for Accessibility. On aligning it vertically, you can do height: 100vh so that it can be responsive on any device.

Overall you did well! Hope this helps.

Marked as helpful

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