product-card

Community feedback

• 

  P

  KonradJam•1,120

  @KonradJamPosted 15 days ago

  Hello @ISsam777!

  Your solution is almost perfect. It just needs a few fixes:

  • Read about HTML5 semantics. Try using <main>, <article>, <section>... <div> Use only for styling, decoration purposes.
  • Don't set base font size in body. It's violation of RWD principals. Base font size should be taken from user web browser Settings.
  • Reset margin and padding for all elements:

  * {
     margin: 0;
     padding: 0;
  }
  

  then for .text set:

  .text {
     display: flex;
     flex-direction: column;
     padding: 2rem;
     gap: 1.5rem;
  }
  

  Now you have nicely placed elements in the .text container.

  • For <img> add object-fit: cover to prevent it from being stretched.

  1