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 Recipe Page

@PrateekSaini15

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

razanabbas 100

@razanabbas

Posted

The design is good overall but I have a few comments:

  1. The source document was not very satisfying to read. I think you could've done it with less divisions.
  2. I suggest you add some left padding for list items inside unordered lists.
  3. I also suggest you add some spacing between table rows.
  4. Your card is a bit wider than it should be. Try applying a max-width. That's all I personally have to say. I hope you benefit from my feedback.
0

@PrateekSaini15

Posted

@razanabbas

Thanks for taking out the time and reviewing my solution. I have done the following as per your suggestions.

  1. Add left padding to the unordered list items.

  2. Increase the spacing between table rows using padding-top property.

I have following two queries to you.

  1. Which part of my source document has more divisions then it should have and could you also suggest how to rewrite that section with less divisions.

  2. As for the card width I am already using max-width property with values set to 300px for mobile view and 1000px for desktop view. Please suggest where its more and what value should I have used instead.

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