All comments

• 

  Rowan•230

  @rowanDeveloperSubmitted 10 months ago

  This was quite a challenge. I'm relieved I was able to do this project.

  I would like to fix/improve some details that are quite not similar to the design preview in my code:

  1. I was unable to separate the Instruction bullet point and the Info. As you can see in the preview there are two columns in the Instruction part. One for the bullets points and another for the Info. I tried to do that part with grid-properties. .list-item { .list-item { display: grid;
     grid-template-columns: 1fr auto;

  But it didn't work. That is why I only commented it.

  Also, I would appreciate any kind of advice and improvements!

  

  Recipe Challenge

  2

  90
  

  P

  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 info.

  0
• 

  Liedson Franco•390

  @LiedsonFrancoSubmitted 10 months ago

  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;
  }
  

  

  Recipe-page made with flex and grid

  1

  50
  

  P

  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
• 

  AdamBtech•20

  @AdamBtechSubmitted 10 months ago

  Would you have tips to make the code more DRY?

  Thank you!

  

  QR Code Card using HTML and CSS

  3

  50
  

  P

  Tharindu D•120

  @tharidu678Posted 10 months ago

  you can set your body tag style like this..

  .body{ display:flex; align-items:center; justify-content:center; height:100vh; }

  this may help you to get rid off your scrollbar.

  You only need one div in your body tag for this to work.. if you have one or two div s in body tag, put them in a div.

  1