QR Code Component page using HTML and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace<div class="container">with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues. click here for more on web-accessibility and semantic html To center .container on the page using flexbox or grid, - USING FLEXBOX: add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body

  body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  }
  

  • USING GRID: Add min-height:100vh; display: grid place-items: center to the body

  body{
  min-height: 100vh;
  display: grid;
  place-items: center;
  }
  

  Use the colors that were given in the styleguide.md found in the zip folder you downloaded.

  There is no need to give .container a width, margin and border rather reduce the max-width value and give it the same padding value for all the sides. max-width: 320px which is 20rem/em padding:16px which is 1rem/em Give the img a max-width of 100% and a border-radius value, the rest are not needed.

  Giv .content-text a margin value for all the sides, text-align: center and a font-size of 15px which is 0.9375rem, this will be the font-size of both p and h1. Give p a margin-top or h1 a margin-bottom value for the space between the text.

  Use relative units like rem or em as unit for the padding, margin, width values and preferably rem for the font-size values, instead of using px which is an absolute unit. For more on CSS units Click here

  Hope am helpful.

  Well done for completing this challenge. HAPPY CODING

  Marked as helpful

  1
• 

  Owen Ezeh•80

  @owen-OEPosted over 1 year ago

  It's not responsive for mobile view. If you're using plain css, you should try using media queries to make it mobile responsive per the designs given. I advice you try using tailwind css for this project instead. You'll have lesser codes to write using the tailwind css framework.

  Also for desktop view, the card content should have more margin at the top, and maybe giving the card a little less padding.

  Marked as helpful

  1

  ---

  

  P

  visualdennis•8,375

  @visualdennissPosted over 1 year ago

  @owen-OE I agree with media queries.

  About tailwind, i dont think it is necessary to rush into a framework before mastering the fundamentals in vanilla css and certain degree of training and experience in CSS itself. Tailwind won't solve the issues here, as it is more related to the how css itself is used.

  @dejair-velozo I'd suggest not using width: 25%; at all, this simply shrinks it too much unnecessarily when the page is resized. Instead use width: 100% and max-width: 300px is enough here. 500 is too big compared to design.

  Hope this is helpful!

  Marked as helpful

  2