Skip to content
Submitted 7 months ago

Recipe Page

dewyrag•210
@dewyrag
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?

somehow completing this. what i need to do next is learn and practice more.

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

centering the image, paddings/margins, aligning the table, changing the color of the numbers. to overcome i used inspect in firefox to get an idea of what to do next.

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

responsiveness, cleaning the html/css

Community feedback

  • Account deleted

    Hi, daderisme.

    Good start on the challenge. I have a few things to mention that might help you out on your coding journey:

    • Consider adding a width property to the #container selector so that any content inside doesn't overflow.
    • Adjust the width value of the image to 100% to ensure that it fits inside the container instead of overflowing.
    • Without using margin to center your content, you can add the display: flex property in your body selector:
    body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}

    For better accessibility and responsiveness on all screen sizes, use the mobile-design.jpg file to replicate the design for mobile screens.

    I hope this feedback is helpful for you. With that said, happy coding.

    Marked as helpful
    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