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 with Scss

@mendesdomingosdev

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?

I'm proud that I could even do it. 😃

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

For sure was dealing with media queries.

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

I'd love to get help with the responsive part of the page, I really don't know how my main image is too strange when changing resolutions, well I tried to make it work somehow, but I see that it's wronggg. 🤣🤣 Also a better way to make the last part? tried with flexbox and was a mess, so I used table.

Community feedback

Ralph 190

@RalphPastel972

Posted

Hello,

It is looking good.

I may suggest to change your breaking point because at a width of 770px it does not look good. And at a viewport width of 1000px, the actual .card has only 472px of width and it looks like a waste of space that does not respect design.

I would like to also suggest to use the <section> tags for the different sections (Preparation, Ingredients, Instructions…) instead of just <div>.

You succeeded to do the nutrition part with table! Well done. I couldn't and used just <div>. I think your approach is way better.

I do not have a solution for the responsive issue you mentioned (because I am a newbie) but you might try to change

.card {
    width: 45%;
}

by

.card {
    width: 736px;
}

Good luck!

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