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

Recipe page

P
Arcloan 280

@Arcloan

Desktop design screenshot for the Recipe page 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?

.

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

The correctly sizing of the various items.

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

If there are some things that could have been done better I would like to hear and learn :) Thank you.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi! Good work =)

I can give a couple suggestions. Don't use vi for .container element - it'll be very thin on the mobile screens. Try this approach for responsive width:

main {
    max-width: 40rem;
    width: 100%;
}

In the last ul element - nutrition section - it is a bad approach to split names and values in different li cos it ruins semantic of this section. You can use table element here or put them both in one li and apply flex to it.

Also I recommend you to use rem instead of em cos value of rem depends on the root element while em - on the parent element. It could lead to reducing of the sizes of nested elements. And try to use rem and em on the fonts as well =)

Hope that could help =) Good luck and happy coding =)

Marked as helpful

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