Skip to content
Submitted 7 months ago

Recipe Page with Scss

mendesdomingosdev•110
@mendesdomingosdev
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Recipe page
  • HTML
  • CSS
1newbie

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
    @RalphPastel972Posted 6 months ago

    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

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