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

Html, Css

@Josepablo333

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

Damian 150

@damiandev22

Posted

Hi Josepablo, your solution looks quite similar to the design. Nevertheless in my browser (Google Chrome) the text overflow the card. I think this is happening because you are fixing the height of the card. in my opinion you should remove this line (height: 80vh;) Also you should watch the color of both paragraphs in order to achieve a most similiar result. keep up.

0

@luztherose

Posted

Hi Josepablo,

Congratulation on completing this challenge. Your solution looks good, but I have some tips that I think could help for future projects:

  • Structure your HTML using semantics elements whenever possible. For example header, main, footer, etc.

  • Always add the alt="" attribute and it should be always filled out with descriptive text for the image since this is the text that will be displayed if the image cannot be loaded. For example alt="This is a QR code to frontend mentor".

  • Pay close attention to the design to add the margin, padding, colors, etc.

Overall good effort! Hopefully, this feedback helps.

0

@Benaks

Posted

This looks ok, but text color for the paragraph shouldnt be dark. it also looks awkward on devices like iphone 12 pro

0

@Benaks

Posted

okay, you almost got it but your margins were too much that made your text overflow. you should also use more relative vales like em , % rather than px for div sizing

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