Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product preview card component

P
Veronika 110

@designver

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I handled this challenge quite quickly, struggled a bit with responsive dimensions of elements, but in the end, I nailed it!

I noticed incorrect display of my component on GitHub (missing shopping cart icon). Everything works in my code; GitHub likely has an issue with the path to the icon.

Community feedback

P
Douo 940

@Douoo

Posted

Hey Veronica, just came across your solution. Impressive - I like your solution and even better, I like your confidence. You did a very good job. A small suggestion though - in your <article> tag you gave it a fixed width of 21.4375rem, by doing this you are taking away the responsiveness and setting a constant width that stays the same for a certain condition (in your case responsiveness). Now there is no problem with this as long as it gets the job done but its not as flexible as it should be. Here is a better solution for it:

article {
  width: min(21.4375rem, 85%); 
...
}

This will give it a max width of 21.4375rem but will keep the width at 85% in case its lower than the given width. By doing this you won't need to change or adjust the width property in different media size. Overall, you have done a pretty solid job for this challenge and seeing from your code I have no doubt that you will progress even better with time. Keep up the good work Veronica 👍🏽

0

P
Veronika 110

@designver

Posted

@Douoo Hi, thank you for the comment! Responsiveness is a topic I haven't thoroughly studied yet, so I understand that there are other ways to solve it. In the next project, I'll try working with your suggestion :)

0
abiskar100 100

@abiskar100

Posted

@designver hey you did a wonderful job there but you missed the cart svg. <svg src="" /svg> . If you adjust the gaps on text-context it will be perfect .

0

P
Veronika 110

@designver

Posted

Hello, thank you for the comment. The SVG image was present in the code and was functional, but the issue occurred during the upload to GitHub. Everything has been fixed :)

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord