Creating product card using grid

Community feedback

• 

  Melvin Aguilar 🧑🏻‍💻•61,140

  @MelvinAguilarPosted almost 2 years ago

  Hello there 👋. Good job on completing the challenge !

  I have some suggestions about your code that might interest you.

  HTML 📄:

  • You can use the <picture> tag when you have different versions of the same image 🖼. Using the <picture> tag will help you to load the correct image for the user's device saving bandwidth and improving performance. You can read more about this here 📘.

    Example:

    <picture>
        <source media="(min-width: 768px)" srcset="./images/image-product-desktop.jpg">
        <img src="./images/image-product-mobile.jpg" alt="{your alt text goes here}">
    </picture>
    

  CSS 🎨:

  • Remove grid-template-rows: 60vh; from the .grid selector, this will make your component stretch too much on large devices like a 4k screen.

    screenshot ( iPad Air (820x1180) ): screencapture-kloprop-github-io-Frontend-Mentor-3-product-preview

  I hope you find it useful! 😄

  Happy coding!

  Marked as helpful

  2

  ---

  

  Shiash•100

  @klopropPosted almost 2 years ago

  @MelvinAguilar Thanks for the feedback

  Thanks for reminding me about picture tag, it is useful in this case.

  Removing 60vh looks great too, I actually forget why I added the property.

  0
• 

  Fox•550

  @urboifoxPosted almost 2 years ago

  Nice Solution there! just put in mind to take care of the README.md file, so you wont have to change them in all your repos in the future! happy coding :)

  2

  ---

  

  Shiash•100

  @klopropPosted almost 2 years ago

  @midoashraf010 Thanks for the feedback.

  Could you explain more about the file ? Do you mean I should delete it if it is not written ?

  0

  

  Fox•550

  @urboifoxPosted almost 2 years ago

  @kloprop A README file is an essential guide that gives other developers a detailed description of your GitHub project. if you read the README file thats in your projecct by default, you will find some explaination and information about the challenge, they also add a README_template.md. so what you can do is next:

  • delete the default README file
  • rename the README_template.md file to => README.md so it becomes the default README file
  • read the file and you will find note everywhere tells you what to write and change
  • then update your repo with the new README file

  note github or any other git website by default puts the README file in the interface of your repository once it finds it in your files.

  if theres anything still not clear please tell me goodluck!👌🌹

  1