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

cassiopeia 160

@cassiopeia001

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Ryan-OHanlon

Posted

A very strong match to the desktop design. While the code is well structured, it could do better with added comments to understand what each section of HTML or CSS is doing what.

The color of Simple Omelette Recipe does not have any color attribute added from the style guide.

While the site is responsive to the desktop design, the webpage does not change to match the mobile design. You need to make a second set of CSS rules for the desktop using the @media rules and apply a min-width. Then put all the desktop rules to adjust the margin and padding for inside the @media rule.

/*Desktop CSS rules when wider than 375px*/
@media (min-width: 376px) {
    body{
    }
}

Also very good using the margin left attribute to create space for all listed elements and the table.

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