Responsive Product preview card component built with grid...

Community feedback

• 

  Wendy•1,970

  @wendyhamelPosted about 2 years ago

  Nice first try on this challenge!

  Did you see your report? Read the information provided with the learn more link. You could learn a lot by fixing these issues.

  Regarding your questions, you can do this with flexbox or grid. Your choice. Both are fine for this. In your code, you mix things up a bit. grid-template-columns: 1fr 1fr; will have no effect without display: grid. You added a display: block here, the default for blocks is that they take up all the space next to them. So stacking comes automaticcally with that. The display: flex sets then next to eachother because the default of flex is set to row. So, you got responsive behavior by using the most basic display options. Which works fine for this challenge!

  Something else: Your font is not loading. I think the link is not correct.

  A nice finishing touch: you can round the top two corners of the image when it is on top, and the left two corners when it's next to the text-area. ;)

  Happy coding!

  Marked as helpful

  1

  ---

  

  Eze Samuel•20

  @Eyepop01Posted about 2 years ago

  @wendyhamel Thanks a lot... I really appreciate... This is my first challenge... I was expecting lots of errors... I hope to be a better programmer... :)

  0
• 

  P

  Ed•720

  @EdwinSchPosted about 2 years ago

  Hi Eze, I wanted to supplement on Wendy's feedback. In general simple components like this challenge are achieved by using Flexbox. As this is a pretty straight forward and ease to use technique. I'd advice you to learn Flexbox first and switch to Grid when you get the hang of things. Grid is just a little bit more complex and extensive. And mostly used for more complex page layouts. Keep it up :)

  Marked as helpful

  0

  ---

  

  Eze Samuel•20

  @Eyepop01Posted about 2 years ago

  @EdwinSch thanks... I really appreciate your feedback...

  0