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

responsive card created using Flexbox & Grid

@TheBeyonder616

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


What are you most proud of, and what would you do differently next time?

getting the right size

What challenges did you encounter, and how did you overcome them?

getting the right size for the card

What specific areas of your project would you like help with?

Any advice would do

Community feedback

P
Max 160

@maxkdavis

Posted

Overall, really nice work. I like your use of media queries to incorporate responsiveness in your design. The use of CSS variables is a nice practice too.

Some minor suggestions to consider:

  • the content container's padding isn't aligned to the design, which is causing your h1 heading to not look like the designs.
  • put all your right-side content into one container so that one padding property will align everything. Notice that your 'perfume' text is a bit left of the heading, and your button element is to the right of the pricing text. Ideally, this should have the same vertical left-side alignment.
  • old price text should be smaller. consider the <small> text.

Hope these help! Again, nice job!

Marked as helpful

1

@TheBeyonder616

Posted

@maxkdavis thanks you I’ll keep that in mind

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