Responsive Recipe-Page using CSS

Community feedback

• 

  Osman Bay•690

  @osmanbay90Posted 9 months ago

  Great job on completing the Frontend Mentor challenge! Your project shows promise, but here are some areas where you could make improvements in your HTML and CSS:

  1.Correcting nutrition section using table tag:

  Replace the <ul> tag with a <table> tag to create a table for the nutritional values. Then structure the data using <tr> for rows and <td> for cells.

  <div class="nutrition">
    <h3>Nutrition</h3>
    <p>The table below shows nutritional values per serving without the additional fillings</p>
    <table>
      <tr>
        <td>Calories</td>
        <td>277kcal</td>
      </tr>
      <tr>
        <td>Carbs</td>
        <td>0g</td>
      </tr>
      <tr>
        <td>Protein</td>
        <td>20g</td>
      </tr>
      <tr>
        <td>Fat</td>
        <td>22g</td>
      </tr>
    </table>
  </div>
  

  2. Adjusting border-radius in responsive design:

  Modify the border-radius for the image within the media query to ensure it suits the responsive layout without breaking responsiveness.

  @media (max-width: 768px) {
    .box img {
      border-radius: 0; /* Adjust border-radius for responsiveness */
    }
  }
  

  other than that your solution looks great happy coding.

  1

  ---

  

  hilmi77•250

  @hilmi77Posted 9 months ago

  @osmanbay90 thnx I will do it as you said :)

  1