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

grid system

@kalebbirhanu

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

P
Marcus 110

@marcus-hill

Posted

Hi Kaleb, I'm unable to access your Github Repo (perhaps it isn't public?), however I can provide some feedback based on your live preview link and the dev tools:

  • Good start with the mobile design first, I can see this is where you've put your effort and began with mobile design, which is best practice.
  • Good use of some semantic HTML, however I think you could have used more, such as the <article> tag and also the <section> tag.
  • On a desktop, your solution does not meet the design and is far too wide, extending nearly to the left and right hand side of my screen. Whilst it works on a smaller screen size (of 1000px), it begins to get far too big on anything larger. From looking at the dev tools, there doesn't appear to be a max-width set on the .total class div, which is causing it to grow and grow in size until the content is stretched way beyond necessary.

Keep up the good work and I am sure this will be much better with a few changes.

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