Skip to content
Submitted 8 months ago

Responsive recipe page

DivasJaglan•170
@DivasJaglan
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?

Proud of making this webpage responsive. Next time I would like to use vw and vh units for most of the cases as it helped me a lot for its responsiveness

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

I faced a problem in aligning the given nutrition values in the same line. Then I came up with a solution that I can set the width of the nutrition name then give the left margin to nutrition values.

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

I want help with the responsiveness. I think it can be done with less code then the one which I have written

Community feedback

  • Nebil Nejmudin•230
    @Nebil-NejPosted 8 months ago

    I believe the reason why you used to many Media Query code lines is because you were setting the Container at a Fixed Width and heights, mostly when you use dynamic width properties such as, min-width/max-width, the look of the page is not bad on lower screen, or bigger screens, depending on how you are progressing through your project. The thing you do not want to do is giving a Height a Fixed Value, or avoid it all together, because once a height has a fixed value, it will ruin your Responsive Design.

    Aside from that, Everything you did was Really Good Sir! Keep it up

    Marked as helpful
    0
    DivasJaglan•170
    @DivasJaglanPosted 8 months ago

    Thanks for giving my project your precious time and this valuable feedback 💖@Nebil-Nej

    0
    DivasJaglan•170
    @DivasJaglanPosted 8 months ago

    Updated my code after getting enlightened about my mistakes by you. Please provide feedback about the new one if you get some time @Nebil-Nej

    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