Skip to content
Submitted 10 months ago

Recipe-page made with flex and grid

Liedson Franco•390
@LiedsonFranco
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

To add borders to the table was a bit hard but the solution its super simple you just need to set the tr to display block and set the border css

tr{
    display: block;
    padding: 10px;
    margin: 0;
    border-bottom: 1px solid hsl(30, 18%, 87%);
}
tr:last-child{
    border-bottom: none;
}

Community feedback

  • Tharindu D•120
    @tharidu678Posted 10 months ago

    you can add simple padding to your <li> tags and this helps you to make a space, between bullet points and li text.

    anyway i think you can use flex box instead <table> for style last section. work with flex box will make your life easier. but I appreciate how you have done it using <table>.

    Marked as helpful
    1

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