Skip to content
Submitted 7 months ago

Responsive Recipe Page Using CSS Flexbox

Azize Doğan•100
@azizedogan
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 of making it easier and more responsive.

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

I had a little difficulty creating a responsive design. I overcame this difficulty by reading different codes.

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

I want help with responsive design.

Community feedback

  • Tharun Raj•1,330
    @Code-BeakerPosted 7 months ago

    Hi there, congratulation on completing this challenge! 🎉

    You've done a great job regarding the responsiveness of the website on mobile phones.

    The two points below will help you fix the image on mobile phones.

    • set an overflow hidden to the container:
    .container {
overflow: hidden;
}
    • add a small padding to the head-img
    .head-img {
padding: 1rem; /* should be fine in this case */
}

    Change the padding accordingly.

    This will make the image look better on smaller screens.

    Hope you find this helpful!

    0
    Azize Doğan•100
    @azizedoganPosted 7 months ago

    @Code-Beaker Your comment was helpful. Thank you for that.

    1
  • leodev•290
    @hangtime319Posted 7 months ago

    Congratulations!!

    0
  • Taiwo•130
    @taiwogbadamosiPosted 7 months ago

    well done!

    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