Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 8 months ago

Responsive Recipe Page Using CSS Flex

pure-css
keftajnr•240
@keftajnr
A solution to the Recipe page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


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

It was definitely a lengthy and time-consuming challenge. I liked and am proud that i approached it head-on with determination. I made good use of the CSS flex, margin and padding property, and learnt a few good things about how to use with the CSS width property.

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

I had a particular issue which took some time to resolve.

It was concerning the use of CSS padding and width properties. In my code, i made use of CSS width property and set it to 100% while using the CSS padding property. The padding in the element was evident however it caused overflow in the container, which i did not want.

In resolving this, i thought carefully and removed the CSS width property, and it worked as i wanted it to.

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

I would need help in my usage of CSS padding in the container; how i can manage and make use of it much better, what i need to do to make it professional

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on keftajnr's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License