Skip to content
Submitted about 1 year ago

Responsive Recipe page

agnese•360
@aggie-l
A solution to the Recipe page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

I am proud of finishing another challenge, although there are probably better ways of doing it.

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

One of my main challenges so far has been centering the main component - in this case the recipe page container - right in the middle of the page. I have tried using flexbox before, I am using grid here, but for some reason I don't understand it is not centering properly. Also, I used padding on body to prevent the recipe container from sticking to the top and bottom of the page.

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

All feedback is very welcome and appreciated :)

Code

Please log in to post a comment

Log in

Community feedback

  • Moses•340
    @mbtenkorang

    @aggie-l Congratulations 🎉🥳👏 on completing this challenge.

    Some feedback in relation to the challenge you encountered;

    • To notice that your design choice for the <body> element works you may view the webpage in the browser on a simulated 4K display using the Toggle device emulation feature - CTRL+SHIFT+M of the Developer console - CTRL+SHIF+I.

    • A quick fix though, for mobile devices the <body> element receives a padding which based on the designs will be more suitable only in a media-query for desktop/larger displays. The padding should keep the page "centered" until the display is much much larger as you've done now.

    • The flex declaration for the .recipe-container can be removed and the design will still hold because the padding value of the .recipe-container is keeping all the elements in line at the along all edges

    I hope this feedback helps. Great job 👍and happy coding 😁🧑‍💻

    Marked as helpful

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