Product Preview Card

Community feedback

• 

  Faisal Alharbi•330

  @LovelyFaisalPosted about 2 years ago

  Hi @Jackgomez You've done great 💪

  • You can center the component using flexbox Add this property to body element

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

  And delete margin: 15rem auto; from .box

  You can learn more about flexbox here

  • Use <main> instead of a simple <div> this way you improve the semantics and accessibility showing which is the main block of content on this page. Remember that every page should have a <main> block and that <div> doesn't have any semantic meaning.

  Click here for more information

  Good job, and happy coding!

  Marked as helpful

  1
• 

  Philipp•190

  @hermi72Posted about 2 years ago

  Hey @Jackgomez, some suggestions to improve you code:

  Your direction is correct. I can see that you've used the majority of the semantic tags that are appropriate for this challenge; the only block you missed was the paragraph that contains the quote text. By using <blockquote> there, you can increase accessibility by telling screen readers that the content inside that paragraph is a quote.

  To center you content to your page, add the following to your Body Element:

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

  Happy Coding! 👻🎃

  Marked as helpful

  1