HTML, CSS

Community feedback

• 

  romila•3,570

  @romila2003Posted about 2 years ago

  Hi vikkyava,

  Welcome to the frontend mentor community and congratulations for 🎉 for completing your first challenge, the product preview card looks good, and it is great that you used the flex property to center the card. There are some issues/suggestions I want to address:

  1. I would highly recommend you following a mobile-first approach in future projects as it will be easier for responsiveness and changing/rearranging elements within your body. Also, it is best practice to do so. Therefore, rather than using max-width within your media query, you can use the min-width instead. Also, the value given to the max-width in your code is quite small so I would suggest changing it to a bigger value such as max-width: 800px however when doing so, I noticed that there is a blue background.
  2. In desktop mode, the size of the card is quite large, where it causes the user to scroll to see the whole card.
  3. It is best practice to wrap the main content within the main tag which would ensure that your content is wrapped within the correct landmarks e.g. <main class="container"></main>

  Overall, great attempt and wish you the best for your future projects so keep coding 👍.

  Marked as helpful

  1
• 

  Lucas 👾•104,340

  @correlucasPosted about 2 years ago

  👾Hi @vikkyava, congrats on completing this challenge!

  Here’s some tips to improve your solution code:

  The image is not responsive yet, a quick way to make any image responsive and respecting the container size is to add display: block and max-width: 100% to the <img> selector. To improve the responsiveness even more adding the auto-crop property you can add object-fit: cover to make the image crop inside the container its inside.

  img {
      display: block;
      object-fit: cover;
      max-width: 100%;
  }
  

  Save your time using a CSS RESET to remove all default settings that are annoying as the margins, paddings, decorations and optimize it making easier to work,see the article below where you can copy and paste this css code cheatsheet: https://piccalil.li/blog/a-modern-css-reset/

  ✌️ I hope this helps you and happy coding!

  1