Responsive product preview card solution by @Gonzz

Community feedback

• 

  Boris•2,850

  @mkborisPosted 3 months ago

  Here are a few things to review

  • To properly center the card use flexbox. add this on your body and remove the margins from the .card

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

  • To handle responsive images effectively you can use the picture element. This allows you to specify different images for various screen sizes and resolutions.
  • It's best practice linking Google fonts directly in the HTML head section rather than directly in your CSS file as it enables asynchronous downloading, improving page load times.
  • Media queries should be defined in rem not px
  • Consider using a modern CSS reset at the start of the styles in every project. Like this one Modern CSS Reset. This will help reset a list of default browser styles.
  • Font-size should be written in rem not px. This article explains it better Why font-size must NEVER be in pixels.

  Marked as helpful

  1

  ---

  

  P

  gonzzdev•70

  @gonzzdevPosted 3 months ago

  @mkboris Awesome! thank you very much. Both articles are really good. Im already applying the changes 💪🏽

  1