a responsive recipe menu

Community feedback

• 

  Olamilekan Owolemi•170

  @nakelcodePosted 3 months ago

  For the nutrition section, use table tag while maintaining the text to the left

  Marked as helpful

  1
• 

  P

  Carl•1,075

  @CarlHummPosted 3 months ago

  Hi there

  Like Olamilekan Owolemi pointed out, the data in the nutrition section looks more like a table than a list.

  The markup could look like this

        <table>
          <tr>
            <th>Calories</th>
            <td>277kcal</td>
          </tr>
          <tr>
            <th>Carbs</th>
            <td>0g</td>
          </tr>
          <tr>
            <th>Protein</th>
            <td>20g</td>
          </tr>
          <tr>
            <th>Fat</th>
            <td>22g</td>
          </tr>
        </table>
  

  TH = Table Heading TR = Table Row TD = Table Data

  So the values themselves would be <td> and the associated labels would likely be <th>. These would be included inside <tr> for layout.

  The styles for the table could look like this

  table {
  width: 100%;
  text-align: left;
  border-collapse: collapse;
  }
  
  tr:not(:last-of-type) {
   border-bottom: 1px solid #efefefef;
  }
  
  th {
  padding: 0.8rem 1rem;
  }
  
  td {
  font-weight: bold;
  }
  
  

  The above is a rough example and not final code, just to show you how a table might look as markup and styles. Tables have some differences to regular HTML and may catch you off-guard, particularly regarding borders, sizing and some default user agent styles. I suggest reading more into styling HTML tables

  Create spacing

  In the rough example above, and for your list, you can use padding or margin to create space. The reason you can't create space at the moment is because you've used text-decoration:underline instead of a border-bottom or border-block-end. Might be worth looking into the box model if you're unsure on how to create space.

  Good luck on your future projects

  0

  ---

  

  Molokwu wilson•50

  @bluefrag22Posted 3 months ago

  @CarlHumm thanks alot

  1