QR Code

Community feedback

• 

  Adriano•38,330

  @AdrianoEscarabotePosted almost 2 years ago

  Hello JJ, how are you? I truly loved your project's outcome, however I have some advice that I hope you'll find useful:

  A document ought to have one primary landmark, and the absence of a main tag around the page's primary content is the root of this issue. On this page, there is no other element that is more important than the one that this challenge is based on, so to solve it, wrap all the content in the'main' tag.

  It's always a good idea to pay close attention to the proper use of semantic html elements because they are crucial for screen reader users to understand what the main content of the page is in the case of the'main' tag!

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  The remainder is excellent.

  I hope it's useful. 👍

  Marked as helpful

  0

  ---

  

  JJ•160

  @JeremyPaymalPosted almost 2 years ago

  @AdrianoEscarabote Hello !

  I did the modification, I hope I did it right !

  Thks for your help !

  JJ

  1
• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace the <div class="main"></div> with the main tag. To center a content on a page, add min-height:100vh; display:flex; align-items-center: justify-content: center; to the body. give the img a max-width of 100% instead of a width and height value. give the main a width value , a padding value , a border-radius and a background-color. There is no need for position: absolute and its properties and display: flex and its properties. Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To Hope am helpful HAPPY CODING

  Marked as helpful

  0