QR Code Component

Community feedback

• 

  geomydas•1,440

  @geomydasPosted 5 months ago

  I just edited your code and removed and added some lines. First of all, max-widths should be a fixed width most of the time. It always should be paired with a width whose unit is a responsive unit.

  Example is; .example {width: 95%; max-width: 300px}

  Second, don't use media queries for everything. I removed all of you media queries in the code and this is what you should change;

  .component {

  width: 95%; max-width: 300px; background-color: hsl(0, 0%, 100%); padding: 1em; border-radius: 20px; border: none; text-align: center; box-shadow: 0px 6px 20px 4px hsl(218, 39%, 81%); }

  .qrcode { border-radius: 10px; margin-bottom: 1.25em; }

  Just copy and paste the code that I edited and removed all of the media queries that you have and your solution should be all good now.

  Marked as helpful

  1

  ---

  

  Noor Muhammad Raza•90

  @noormuhammadrazaPosted 5 months ago

  @geomydas thank you for your valuable suggestions. I will surely try include them in my work.

  0
• 

  Nicholas Ainsworth•50

  @nainsworthPosted 5 months ago

  HTML and CSS are clean and well-structured. Great job on including CSS resets and media queries. The only thing I would suggest is organizing CSS a little differently by having the .qrcode, h1, and p styling above the media queries. Otherwise, great job, and keep up the great work!!!

  0