Product preview card component

Community feedback

• 

  Rozan-A•240

  @Rozan-APosted over 1 year ago

  hello you can put the card in child div and give the parent { display:flex; justify-content:crnter; align-items:center;} good job

  1
• 

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  Good written html

  A few things

  • consider the use of an s tag on the old price
  • use the picture element on the pictures

  Css:

  • don't use id is has a high specificity
  • be consistent in the value of font size use rem not px , you have a few px..

  Keep practice, and your gonna be more and more familiar with media queries. Mosy of the time on your media queries it is just change of directions or add margins or padding.

  What do you find difficult?

  For centering the whole project on the middle of the viewport, Use on the body element: Display: flex Justify-content:center Align-items: center

  Or

  Margin:0 auto

  1

  ---

  

  Aviad Churaman•210

  @av1adPosted over 1 year ago

  Thank you! I didn't know the s tag existed and also I think I did try to do the picture element but it didnt seem to work for some reason so I found the other method I used.

  Should I only be using classes on 99% of my elements, which elements should be using IDs?

  Thank you for the telling me to use the body element, I was using the container ID I made instead and was getting confused! @Thewatcher13

  0

  

  Aviad Churaman•210

  @av1adPosted over 1 year ago

  It doesn't seem like margin 0 auto or putting flexbox on the body works as intended, it should be the center of the page which I don't think it did that, is there something Im doing wrong? @Thewatcher13

  0
• 

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  I see on the design, that it works. Margin:0 auto;

  Aligns the content only on the horizontal axis, not vertical.

  Flex should be work?

  0

  ---

  

  Aviad Churaman•210

  @av1adPosted over 1 year ago

  I also did flexbox. It doesn't seem to be at the exact middle of the screen, it is spaced correctly just not in the middle of the screen like the design @Thewatcher13

  0

  

  Aviad Churaman•210

  @av1adPosted over 1 year ago

  It just seems like it's more towards the top of the screen instead of the middle @jewelsonmyjeans

  0

  

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  Can you update your code with flex? So delete the marin 0 auto

  0

  

  Aviad Churaman•210

  @av1adPosted over 1 year ago

  Done @Thewatcher13

  0

  

  Joachim•840

  @Thewatcher13Posted over 1 year ago

  • You have delete your </body>..?
  • add min-height:100vh; on the body

  0