Landing page on the frontend mentor QR code challenge

Community feedback

• 

  Martín•240

  @martinoruePosted almost 2 years ago

  Hi 👋

  For the .container it is recommended to use max-width insted of width so that by shrinking the width of the screen, the width of the container is flexible. Check out this

  In this case I think that you don't need to add height in .qr-code-image because when you use width in an <img> by default the height will be height: auto. And this is useful because you don't lose the aspect-ratio when you increase the image width.

  On the other hand, you added width: 100% to the <h1> but you don't need that because de <h1> element is display: block. And doing so can cause you problems, check out this. And maybe you wanted to use padding instead of margin to add space to this element.

  Hope this helps

  Marked as helpful

  1

  ---

  

  Onyinyechi Viola Obika•130

  @ObikaviolaPosted almost 2 years ago

  @martinorue Thanks

  1
• 

  Bernardus•1,095

  @BernardusPHPosted almost 2 years ago

  Hello ONYINYECHI VIOLA OBIKA.

  To explain about the view port height and width well you cant just use a 100% on something which parent does not even have a width or height to begin with, remember that the element with width:100% will take on the entire width of its parent.

  Here, in this scenario the body is already at 100% width without even declaring it so we can ignore the width part and just focus on the height. If you want the body to be at the FULL screen size then you can use one of the following 2 ways:

  html,body{
  height:100%;
  }
  
  /* OR */
  
  body{
  min-height:100vh;
  }
  

  I personally love the second option. The min-height:100vh will set the body height to at least be as big(in height) as the screen you are using. Both will work in your project

  hope this helps

  Marked as helpful

  1

  ---

  

  Onyinyechi Viola Obika•130

  @ObikaviolaPosted almost 2 years ago

  @BernardusPH will try it out and give you a feedback on how it went. Thanks

  0
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <div class="container"> with the main tag and <h3> 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 width value. To center .container on the page using flexbox, replace the height in the body with min-height: 100vh.

  There is no need to give .container a height value. increase the width of .container for it to be equivalent to the width of the design. width:320px Give the img a max-width of 100% instead a width and height value.

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

  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

  ---

  

  Onyinyechi Viola Obika•130

  @ObikaviolaPosted almost 2 years ago

  @Hassiai Thanks will try it out

  0