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

Solucion para Card Responsive

DKVyotu 80

@DKVyotu

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Ryan-OHanlon

Posted

Excellent job making the product page preview. It's an exact match down to the margin and padding of the text and button element.

It's also impressive that you made CSS rules for the width of the page and set the absolute width of the desktop image by pixels. There's a lot I could learn from this to make my projects have better responsive design.

I think the only thing I was surprised on was the choice of having the breakpoint for your @media rule for mobile be 600px. I thought the breakpoint was supposed to be set at 320 or 375px based on the styleguide.md.

You certainly have a better grasp at using flexbox and writing your CSS rules having each class inherit the previous using &. Very well done.

1

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