A Responsive Product Review Card using CSS grid and flexbox

Community feedback

• 

  David•8,000

  @DavidMorgadePosted over 2 years ago

  Hello and congrats on finishing the challenge!

  If you want your components to keep growing on screen resize, you want to use relative units (rem, %...) instead of absolute units (px, em) on the width of the container and the elements of the card.

  For example you can use a width of 90% on your container but you will have to addjust the rest of the items, I recommend you to use display: flex on the items of your right container to get all the parts of it to grow with the general component.

  I also recommend you to start working with rems instead of px, it will be easy to get your projects to be responsive than using px!

  But anyway, your project looks pretty good, it doesn't broke at mobile sizes and looks good at desktop.

  Hope my answer helps you!

  Marked as helpful

  0

  ---

  

  Viraj Chavan•100

  @viraj308Posted over 2 years ago

  @DavidMorgade This info is really very helpful, thanks!

  1

  

  Viraj Chavan•100

  @viraj308Posted over 2 years ago

  @DavidMorgade Sir, how do you compare the image with your code?

  0

  

  David•8,000

  @DavidMorgadePosted over 2 years ago

  @viraj308 You just use it as a reference and try to get the closest approach with your own style, you don't need to get a pixel perfect result!

  Marked as helpful

  0
• 

  Warren•630

  @warrenleePosted over 2 years ago

  Hi Viraj, if you are not already, I would use an IDE so it can keep your code indented properly. I recommend using Visual Studio Code Editor https://code.visualstudio.com/ And while writing CSS this way is the way to go when starting off, you'd probably want to start learning a style preprocessor so you can write more styles confidently while the preprocessor helps you write your styles in the correct format. Then you can look for style libraries like Bootstrap or Tailwind where they can help boilerplate your styles.

  Here is my solution to this challenge. https://bitbucket.org/warrenlee/frontend-mentor/src/master/product-preview-card-component/index.html

  0