Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Recipe Main Landpage

@ankushPana

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Able to complete Project Under 3 hours

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

To make responsive Website

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

How I can able to provide gap between the nutrition table listed down.

Community feedback

Juan 480

@JEWebDev

Posted

Hello! Great job!

Regarding your question about how to put a gap between the nutrition table here are my tips:

1. If you want to put the gap between the <p></p> element and the table you can give all the elements inside the nutrition div a gap of 1rem. Like this:

.nutrition{
    display: flex;
     flex-direction: column;
     gap: 1rem;
}

2. If you want to put a gap under the table you could give the container a padding bottom of 2rem. Like this:

.container{
    padding-bottom: 2rem;
}

I hope this helps you with that. Keep up the good work!

0
d0t666 110

@d0t666

Posted

I see a big difference compared to the design. Especially in terms of size.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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