QR Code Component - HTML and CSS only.

Community feedback

• 

  Furkan Rehber•230

  @rehberbeyPosted over 2 years ago

  Hello, I like your work. But when playing with my screen width, your typography is not correct (check 590px) and your image may shrink as the screen width grows. Also, I recommend removing the query "(max-width: 1900px)" from media queries.

  It would be much better if you fix them. ✨

  Marked as helpful

  1
• 

  Sean H•90

  @Sean-LHPosted over 2 years ago

  Hey @NickTalvy,

  Awesome work on finishing the project, despite the challenges you had.

  In the future I would recommend starting with the mobile design first. I find it to be simpler to manage things like spacing when the viewport is smaller. And things get more complex as you increase the viewport. With that said, you may only have to do one MQ instead of two when you're expanding the viewport in the future.

  Marked as helpful

  1
• 

  P

  Kent O'Sullivan•1,870

  @12KentosPosted over 2 years ago

  Hey @NickTalvy,

  Congrats on finishing this project, it looks good!

  I did notice however that your image isn't showing up. If you change the following code.

  <img src="/images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">

  to

  <img src="images/image-qr-code.png" alt="QR Code leading to FrontEnd Mentor">

  Your image should start working, I simply removed the / in front of the path, so it's being directed correctly.

  Secondly I checked out your css, and noticed you selected elements directly several times like so.

  p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }

  While this is fine for a smaller project like this, I would strongly advise against doing this in larger projects, as it will cause a LOT of headache. I would instead suggest selecting every element, with either a class or with a class and then the element directly. For instance instead of selecting the p directly you could do the following.

  .card p { font-size: 0.9375rem; color: var(--grayishBlue); padding-inline: 1rem; padding-bottom: 1.8rem; }

  This way only the p elements inside of the element with a class of card will be selected.

  Hope this helps, and keep up the great work!

  Marked as helpful

  1

  ---

  

  Nick•30

  @NickTalvyPosted over 2 years ago

  @12Kentos Thank you for the feedback Kent. That makes perfect sense.

  1
• 

  Okechukwu Victor chiedozie•580

  @covstarPosted over 2 years ago

  Check out my code for help.

  https://github.com/covstar/qr-code-component-solution

  Let me know if it was helpful.

  0