Responsive Product Card

Community feedback

• 

  Pipow•500

  @PipouwPieuwPosted almost 2 years ago

  Hello 👋

  Well done for completing this challenge!

  Without having access to the source design files you can only guess the style property values. The style-guide.md file only gives a few hints. What I usually do is open the .jpg file with an image editor and place it like a layer over my html page so I can compare by switching windows 😂 It's not the most effective thing to do but it works.

  I took a look at your CSS and saw you applied fixed height and width values to your product card. I would advise to use max-width instead to make it more flexible. And leave the height adapt freely. If you style the content correctly, the height should match the design without having to force it anyway 🙂 Same goes for your main element, I would use min-height: 100vh. A fixed height of 100vh may be problematic on mobile devices in landscape mode for example.

  Anyway, you did a really good job 🎉

  Marked as helpful

  0
• 

  Dimitar Radev•930

  @Mitko90Posted almost 2 years ago

  Hi, great solution. What I do is on my Chrome's Dev Tools I go to responsive mode and type 1440px as the width of my screen because that is the value that was given in the style guide. Then I open my image and zoom to 100%. From there I just compare the two. It's not the most accurate but it works for now. Hope I was helpful.

  Marked as helpful

  0
• 

  Dimitar Radev•930

  @Mitko90Posted almost 2 years ago

  Hi again.

  Thanks to your question, I spent the last two hours searching and googling and I found this chrome extension called Designer Tools. It measures the elements on the page like margins, gaps or box sizes.

  I'm definitely going to use it for my next challenge so thank you for the question and I hope I helped.

  0
• 

  Erasmo J. Rojas G.•30

  @erasmorojastechPosted almost 2 years ago

  Hello friend. Nice job on your project.

  For future projects, I suggest you read the "style-guide.md" file. It contains information about fonts, colors, some margins, paddings, and some other values of interest.

  Hope you have a great time.

  0