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
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


I want to know if my HTML and CSS file structures are following good practices, for example, I used the h3 and p elements for the card title and description, were those good choices or were there better options?

Community feedback

OliCB 70

@OliCB

Posted

Good job! Here are a few observations:

  • Remember to delete README-template.md and put your infos in the README.md 😉
  • When your card becomes bigger than the screen, the layout breaks because it has a fixed height of 100vh, so when that happens a bit of the card gets chopped off on the top and on the bottom your background stops before the end of the page. This can be replicated by shrinking the window to a very small size. I admit that kind of an unrealistic edge case because not even the smallest phones would have screens that small, but it's something worth keeping in mind for future layouts. This can be easily fixed by using min-height: 100vh; instead of height: 100vh;. In general, it's recommended to use min-height and max-width, instead of height and width to avoid breaking the reponsiveness of the page.

That being said I think this solution is pretty good! Hope this is useful!

Marked as helpful

1

@high-rolls

Posted

@OliCB Thank you for the review, I've added your changes as well as the ones proposed by the accessibility report. I guess I better move on now, before I spend hours trying to make it perfectly match the design.

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