Product preview card

Community feedback

• Account deleted

  Instead of using margins for centering you should use flexbox so it's in the middle of the screen at all screen sizes. Use this instead:

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

  You can learn about Flexbox here and here. For learning CSS in general I recommend Kevin Powell's channel and his course on responsive design. You can also take a look at my solution.

  Marked as helpful

  1
• 

  Juan Hamilton•470

  @hamilton-i7Posted over 2 years ago

  Hello, Vlad!👋

  Congratulations for completing another challenge. You did a good job nailing the design😊

  A few basic things I would suggest to improve your solution:

  • Consider implementing semantic HTML tags, such as: <header></header>, <main></main>, <footer></footer> in order to give a more meaningful structure to your code. Your can read more about it here 👉Semantic HTML5 Elements Explained.
  • Be mindful about closing all your tags.
  • Try to make your website responsive by using relative units like rem or em, especially on font sizes and also providing the right layout depending on screen size. For this I would suggest checking out the basics of media queries (i.e. @media (min-width...)). More on that here 👉 Responsive Web Design - Media Queries.

  Hope this all helps you and happy coding!😎

  Marked as helpful

  1