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 Preview page using flexbox

Timic Ivey 300

@Lwmeek

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?

using flexbox

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

i dont remember

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

I don't remember

Community feedback

matbac85 600

@matbac85

Posted

Well done! Your component looks great.

Here are my comments (as always, I should point out that I'm a beginner, so I could be wrong):

  • Like you, I used flex, but for the .container I used grid to transform one column into two when you switch to desktop view.

  • Concerning the width of your .container: It's good to use %. If you want the width of your container to be locked at a certain size when you switch to desktop view, simply set a min-width of 90% and a max-width of 37.7rem (=600px, that's the width of the component in desktop view) and there's no need to set a max-width in your media queries.

  • You're using pixels and it's better to use em or rem. Explanations in the resources on discord.

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