Product preview card by MaskCoder

Community feedback

• 

  Lucas Costa•350

  @LucasNCostaPosted about 2 years ago

  First, congratulations on the challenge.

  you can change the image to: "<picture> <source media="(min-width: 1200px)" srcset="imagens/image-product-desktop.jpg" type="image/jpg"> <img src="imagens/image-product-mobile.jpg" alt="Gabrielle-Essence-Eau-De-Perfum-by-CHANEL"> </picture>" This will change the image depending on the screen size.

  you can change the button's SVG to a "span" or "i" that you can import from Google Icons: https://fonts.google.com/icons

  Ever heard of the "Mobile First" method? I highly recommend it, it will make it easier when creating the Media Query.

  to serve as a tip: https://github.com/LucasNCosta/html-css/tree/main/treinar/product-preview-card

  Marked as helpful

  1

  ---

  

  William•190

  @tuaPuan83Posted about 2 years ago

  @LucasNCosta Thank you. I have a question. How can I know the size of this challenge? In this project, didn't specify the size or do I have to specify the size myself?

  1

  

  Lucas Costa•350

  @LucasNCostaPosted about 2 years ago

  @tuaPuan83 available, the size will depend on you, whichever fits the screen best. The "style-guide" gives some hints of font size and screen size for Media Query.

  Marked as helpful

  0

  

  William•190

  @tuaPuan83Posted about 2 years ago

  @LucasNCosta Thank you so much

  1
• 

  JJ Vega•110

  @jjvega86Posted about 2 years ago

  Great work on this, William. One suggestion - when moving into the mobile view, the image is quite tall and fills most of the viewport. I'd recommend setting a max-height/max-width on the image to make sure it scales well when shifting into the mobile view.

  Marked as helpful

  0

  ---

  

  William•190

  @tuaPuan83Posted about 2 years ago

  @jjvega86 Thank you for your advice. I will try it.

  1