Product review card html and css solution

Community feedback

• 

  Brian Schooler•440

  @superschooler

  Posted almost 3 years ago

  Hi Rick, great to see you're starting to get into web development - this site is a great resource I wish I found years ago when I was dabbling in it.

  While your card looks great in the mobile view, once it changes to desktop the responsiveness isn't great. One quick change you can make to fix it is adding the following to the CSS:

  .desktopImage { max-height: 60vh; }

  This will keep the image from reaching 100+ viewport height and overruling the "center" div you have. One more small thing is that the naming convention for html should be "desktop-image" rather than "desktopImage". The latter is called camelCase and should be reserved for JavaScriopt.

  Aside from that, I'd change the breakpoint to a minimum of 700px as anything smaller compresses the text too much. It's OK to keep the mobile view as wide as you need to until the desktop version looks good.

  11

  Marked as helpful
• 

  Rick•270

  @joyrexjrl

  Posted almost 3 years ago

  awesome thank you both, I have gone through and made adjustments to the naming conventions to try and follow some standard. I am use to working with c# and unity (in a very beginner state) so my naming of things comes from that. I have also centered the card using the absolute positioning method, and changed the px count closer to 700. This will help me a lot with the next projects I start working on. Thank you both. I have updated the github, not sure if the "site" has updated or not. Thanks again

  00