Responsive Product Preview Card Component

Community feedback

• 

  Eric Winkelspecht•310

  @ericwinkPosted about 2 years ago

  Hi Saminstein,

  Great job on this challenge! Looks great and is responsive. I don't see a hover state on your button, so that might be a useful thing to add for user interactivity.

  Regarding your question on the prices, I would recommend surrounding both in a container, enabling flex, and separating them with gap.

  When approaching how to structure your code, I suggest drawing some things out by hand before you even begin writing a single line of code. Put boxes around elements, separate the items into columns and rows - draw as much as makes sense to you. This will help you figure out how many sub-containers you may need to help keep your elements organized, and will make CSS much easier to manage. This will be key when working with more complex layouts.

  Also, don't forget about semantic markup. DIVs can be replaced with SECTION which could also help organize your structure. https://developer.mozilla.org/en-US/docs/Glossary/Semantics

  Hopefully this helps!

  Marked as helpful

  1
• 

  Emmiecodes•100

  @EmmiecodesPosted about 2 years ago

  Hi Saminstein, nice job! Have you considered using display: flex for the .card-prices to get them inline? For the structuring I have no answers, still trying to fix mine but yours looks pretty good!

  1
• 

  Milos Djordjevic•990

  @milosshomyPosted about 2 years ago

  You can use <span> tag instead of <p> tag on prices, that way they will be aligned next to each other. Good job on solution. Keep coding! :D

  1