Using Vanilla HTML/CSS for Product Review Card

Community feedback

• 

  Giulia•210

  @GiuliaT97Posted over 1 year ago

  You can try to use picture tag with source and img in your html document instead of using only img tag. Below is an example of the code.

  <picture class="img_content"> <source srcset="assets/images/image-product-desktop.jpg" media="(min-width: 600px)"> <img src="assets/images/image-product-mobile.jpg" alt="perfume"> </picture>

  Marked as helpful

  2

  ---

  

  ilyemm•140

  @ilyemmPosted over 1 year ago

  @GiuliaT97 Thanks for recommending this! I had no idea that the <picture> tag existed until you commented! I'll go ahead and try it out. :)

  0
• 

  Abdul Khaliq 🚀•72,560

  @0xabdulkhaliqPosted over 1 year 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.

  ---

  CSS 🎨:

  • Looks like the component has not been centered properly using flex.

  ---

  • You already used Flexbox for layout. You can read more about centering in CSS here 📚. Now just add the following style rule in your css file

  ---

  body {
      min-height: 100vh;
  }
  

  ---

  ---

  • Now your component has been properly centered

  ---

  .

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

  Happy coding!

  Marked as helpful

  1

  ---

  

  ilyemm•140

  @ilyemmPosted over 1 year ago

  @0xAbdulKhalid Thanks for commenting! I added it into a solution for another challenge that I'm working on, and it centered it beautifully! I'll definitely incorporate this more into my future solution attempts. :)

  0
• 

  archis•260

  @archisvazePosted over 1 year ago

  Nice!! Looks perfect!! TBH I would not put the style.css in assets but thats just me. I would include it in the src or the main folder(same as index)

  0

  ---

  

  ilyemm•140

  @ilyemmPosted over 1 year ago

  @archisvaze Thanks for commenting! Yeah, I can see why you would put it in the main folder as the style.css isn't really an "asset" but rather another file working with the index.html!

  1