Skip to content
Submitted 10 months ago

Recipe page

Kim•440
@01057057kim
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

Nutrition section I can't get the calories to start from left to right, and I'm not very good with @media for mobile. Can someone help? Thank you. I welcome suggestions in the comments.

Community feedback

  • Marcos Travaglini•4,840
    @BlackpachamamePosted 10 months ago

    📌 Some accessibility and semantics recommendations for your HTML

    • To improve the semantics of your HTML, you can change your <div class="container"> to a <main class="container">
    • For the nutrition category you could use tables instead of using flexbox. This way it will be easier
    • For responsive design, the only thing I see that fails is the image. Simply add the max-width: 100% property, with this it will adapt to different screens. Then you will have to make some adjustments so that there is no padding in that area of the image.
    Marked as helpful
    1

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