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 Challenge (Responsive) with HTML & CSS

Pavan GA 20

@pavan-10-7

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


Please let me know where I have to improve!?

Community feedback

Fraser Watt 1,790

@fraserwat

Posted

Hey Pavan, this is looking good - think you could make a few changes to get this looking perfect.

  • Get rid of <div class="body">, and all the CSS rules on the <body> tag, put the background-color from <div class="body"> onto <body>
  • Get rid of height attributes in your divs and change all width CSS attributes to max-width - doesn't matter as much in this challenge but when we've got loads of components on screen we don't want to be strict with dimensions to be as responsive as possible.
  • Use width: 100% on the img - this way it fills its container, but it also doesn't matter if you have a screen smaller than the width you've coded in.
  • Change padding-top to just padding in .code, so you have even boundaries around your content

That should do the trick - keep up the good work!!

Fraser

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