QR Component with Barebones HTML and CSS

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted over 1 year ago

  Replace <div class="card"> with the main tag and <p class="bold-text"> with <h1> to fix the accessibility issues. click here for more on web-accessibility and semantic html

  There is no need to give the body a padding value. To center .card on the page using flexbox or grid instead of margin, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

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

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

  Give h1 and p the same font-size of 15px which is 0.9375rem and the same margin-left, margin-right and margin-top values. Give p a margin bottom value.

  For a responsive content give .card a fixed max-width value and the same padding value for all the sides. max-width:320px padding: 16px . Give the img a max-width of 100% for a responsive image.

  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

  0

  ---

  

  daniel-howorth•130

  @daniel-howorthPosted over 1 year ago

  @Hassiai Thanks for your feedback! I definitely need to work on making my content more responsive so this has been a great help.

  I haven't covered flexbox and grid yet so I was trying to do it with basic html and css. Getting the layout right will become much easier once I do though.

  Thanks again!

  0
• 

  João P. Kiyoshi•200

  @jpkiyoshiPosted over 1 year ago

  Great work, Daniel! Setting margin: auto doesn't work when trying to vertically center an element (I think it only works with elements with display: absolute and inset: 0) . A simple way to do that is to make sure the parent element has a height set and then utilize display: flex alongside align-items: center also on the parent. (you can also not use margin: auto and instead use justify-content: center to center horizontally as well). Here's an example:

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

  You can also use grid to center:

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

  Hopefully this answers your question!

  Marked as helpful

  0

  ---

  

  daniel-howorth•130

  @daniel-howorthPosted over 1 year ago

  @jpkiyoshi Thanks for clearing that up with your explanation. I haven't covered flexbox or grid yet but formatting the layout will become much easier once I do.

  Thanks again for your feedback and support!

  1