Frontend-Mentor-Preview-Card

Community feedback

• 

  Abdul Khaliq 🚀•72,380

  @0xabdulkhaliq

  Posted over 2 years ago

  Hello there 👋. Congratulations on successfully completing the challenge! 🎉

  • I have other recommendations regarding your code that I believe will be of great interest to you.

  ---

  iMAGES 📸:

  • You can use the <picture> tag instead of setting images to background when you have different versions of the same image. The <picture> HTML element contains zero or more <source> elements and one <img> element to offer alternative versions of an image for different display/device scenarios.

  ---

  • 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="(max-width: 500px)" srcset="./images/image-product-mobile.jpg">
     <img src="./images/image-product-desktop.jpg" alt="alt text goes here">
   </picture>
  

  ---

  .

  I hope you find this helpful 😄 Above all, the solution you submitted is great !

  Happy coding!

  00

  Marked as helpful
• 

  Petros Devrikis•380

  @Petrosdevri

  Posted over 2 years ago

  Hey there, nice work and congrats for completing the project!

  A few notes on your solution:

  • Try changing the width of your main element to a smaller value in order to ensure that both images and text display in harmony. By setting it to auto you basically enable the browser to render it with issues (for example the image won't appear well if you zoom to 100%). I personally chose to wrap these elements inside a .product-preview div after the main element and set a width of 550px and a height of 400px, which I of course changed for smaller devices by reducing width and increasing height respectively.

  In conclusion, your project seems to be decent and by working on various details and practicing frequently you will be able to achieve even better results.

  01

  Marked as helpful