QR code Solution - Adam F

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 2 years ago

  Hello

  I'm afraid there are some problems in this, partly caused by the reset and partly your code

  1. Update alt text on img to be capitalised correctly and say where the QR code goes to (add url)
  2. Font size must never be in px. Use rem (really important!)
  3. The card should not have a width or height on it. Only a max-width in rem
  4. The image should not have a width or height in px. Your reset is already setting max width to 100% so you shouldn't need anything, but you can add width 100% if you want
  5. The card should have padding. It's important to understand the box model (look it up!). Padding is for internal spacing on boxes to keep content from the edges. Margin is for external spacing between elements. The card should have padding. The elements inside should only need vertical margins
  6. Border radius should be in a fixed unit like px/rem. Using % will create strange radius on non-square items
  7. On mobile landscape the QR code is actually cut off. I am away from computer so can't check the cause but it's possibly a problem with having height 100% on both the html and body in combination with the grid centering technique.

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Use rem or em as unit for the padding, margin, width and preferably rem for the font-size. The rem unit is relative to the browser and can be changed by the user. The em is relative the first font-size that was given em. Both rem and em have a default value of 16px, 1rem/1em=16px; for more on CSS units watch this https://youtu.be/N5wpD9Ov_To

  Give the img a max-width of 100% for image to fit where it is placed and be responsive or width of 100% for the image to fit where is placed instead of a fixed width and height value

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  0
• 

  tarek•50

  @tarek008Posted almost 2 years ago

  Nice work Adam , As i see the layout look good and your code is well-structured, you just need to add some padding to the bottom to make it look perfect

  0