Product preview card component

Community feedback

• 

  KapteynUniverse•2,170

  @KapteynUniversePosted about 1 month ago

  Hey @paduiii, nice job.

  Looks like you put relative to the span tag, for this project there isn't a problem but i feel like in a page where elements wrap on small screens it may be cause issues, because an element with position: relative; is positioned relative to its normal position. Also instead of eyeballing the value top: -10px; , You can use

  span {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  }
  

  and give .card-2 .price { position: relative; } for better vertical positioning.

  An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed). However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling. So we give position: relative to the element we want to relate with.

  Since you already put "$169.99" in p tag with span, you can use flex like @cjdemille said below or grid

  .card-2 .price {
  display: flex;
  align-items: center;
  }
  

  You can check for positions. here

  For future projects; put the content in a main landmark for better accesibility

  Addition to @cjdemille CSS advise, use a css reset for every project.

  Marked as helpful

  0
• 

  P

  cjdemille•500

  @cjdemillePosted about 1 month ago

  This is a good take on this project. You've obviously been able to closely replicate the design.

  It would be best practice to break your styles out into a separate CSS file. That will help to make markup easier to read.

  You can also use CSS to adjust the letter spacing in the word "perfume." This will allow screenreaders to still see "Perfume" as a single word.

  It might be helpful to give your class names something with more meaning than just "card-1" and "card-2." It can be easier for someone else to use them, or for you to make adjustments to a files when you come back to it later.

  You could also use flexbox to center the "$169.99" to the "$149.99". That would allow you to make sure they're always aligned and not dependent upon a user having the window at the precise size to get the desired alignment.

  Marked as helpful

  0