Preview-card Challenge I used HTML CSS-flex.

Community feedback

• 

  Hassia Issah•50,650

  @HassiaiPosted almost 2 years ago

  Replace <section id="card"> with the main tag, <h2> with <p>, <h3> with <h2>, <h4> with<p> and <div class="attribution"> with the footer tag to fix the accessibility issues. for more on semantic html visit https://web.dev/learn/html/semantic-html/

  To center #card on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; or min-height:100vh; display: grid place-items: center to the body.

  There is no need for align-items: center: justify-content: center; in .flexbox-container In the media query give # card a fixed max-width value instead of percentage width value. There is no need to give it Position: relative and its properties and margin to center it. Give .flex-container flex-direction: column and flex-box-item a width of 100%. eg:

  Reduce the max-width value of the media query
  @media  (max-width: 600px) {
     #card{
      max-width: 400px;
     }
  .flex-container{
    flex-direction: column;
   }
  .flexbox-item{
    width: 100%
  }
  }
  

  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

  1

  ---

  

  entengs•50

  @vullagvs26Posted almost 2 years ago

  @Hassiai Thanyou so much for your feedback!

  1