Product Preview Card Component

Community feedback

• 

  P

  Steven Stroud•11,910

  @StroudyPosted 3 months ago

  Hey, I like what you have done here, Some things stand out to me,

  •   object-fit: cover;
      margin-bottom: 1rem;
      width: 100%;
      max-width: 200px;
      height: 100%;
      max-height: 600px;
      border-radius: var(--main-border-radius) var(--main-border-radius) 0 0;```
    

  • Changing your max-width: 200px to max-width: 100%, max-height: 600px; to max-height: 100%; and removing height: 100%; and width: 100%; because they are now redundant, will make your image more responsive.
  • Using max-width: 100% or min-width: 100% is way more responsive than just width:100%, check out this article also from the same Frontend mentor dev responsive-meaning, she goes into more detail.
  • You should avoid using ID selectors # and use class="" Instead because #ID is usually used for JavaScript or other reasons not styling.
  • You should avoid using px as it is an absolute unit and not a responsive unit like rem or em, You should look at this article from a Frontend mentor dev, Why font-size must NEVER be in pixels.
  • Another great resource for px to rem converter.
  • Line height is usually unitless instead of line-height: 150%; should use line-height: 1.5; this means it is 1.5 x the font-size, unitless value ensures that the line height will scale proportionately.
  • You should apply a full modern reset to make things easier as you build, check out this site for a Full modern reset
  • Check out this article from a Frontend mentor dev about responsive-meaning.
  • When on a mobile screen your <img> is meant to change to the second <img> you can do this using a <picture> element.
  • Using a naming convention like BEM, Using proper naming will prepare you for the changes in design of the website.

  I hope some of this helps, Really give those articles a good read and try to understand responsive web design, Happy coding look forward to seeing more from you!

  Marked as helpful

  0