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

@cmachdev

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 my first challange, feel free to leave your feedback, I will appreciate it

Have fun togheter coding and learning

Community feedback

@cmachdev

Posted

the text overflowing, in one computer look nice and the other one look with that overflowing, just changing the font-size to 1.3 and 1.4 change one each other, I don't know why, and I will see the h2 and p, thank you

0
P

@a-costas

Posted

Hi there! Nice job completing the challenge!

It looks like you've had a bit of an overflow issue with your text expanding past the edge of your card. This is happening because you've explicitly defined the height of your card at height: 30.94rem;. To fix this, you can remove that height setting, and set the display for qr-card to display: flex; flex-direction: column;. This will allow your card to vertically grow to fit the content within it.

You shouldn't have to explicitly redefine padding for h2 and p as you've already defined a padding for qr-card and everything it contains.

Hope that helps and happy coding!

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