product-preview-card-component with native html css

Community feedback

• 

  David•7,980

  @DavidMorgadePosted over 2 years ago

  Hello Luigi congrats on finishing the challenge!

  I would like to give you some suggestions.

  First of all, instead of centering the whole card usings margins (with is a hard and painfull to calculate and get it properly), try removing those margins and use flex on the parent element (the body) to center it on the middle of the screen, for this you will have to set the body minimum height to 100vh so it takes the whole screen, you could try something like this:

  body {
    background-color: var(--Cream);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
  }
  

  I would also recommend you don't hide the image depending on the size of the screen, instead of that you can use the <picture> tag with two <source> tags and render the image conditionally depending on the size of the screen, you can learn how simple is the picture tag here.

  Hope my feedback helps you in future challenges, good job!

  Marked as helpful

  1

  ---

  

  Luigi•240

  @luigi-peronePosted over 2 years ago

  Thank you David, i really apreciate your suggestions.

  1
• 

  Adriano•42,720

  @AdrianoEscarabotePosted over 2 years ago

  Hi luigi, how are you?

  I really liked your project, but I have a tip that I think you will like:

  1- I noticed that you didn't use the same font style as the example layout, you get the font link that was used in the file called style-guide.md

  One other piece of advice, try to prioritize relative measurement units at lower resolutions, this will improve the responsiveness of your project. The rest is really good! Hope it helps...👍

  Marked as helpful

  1