recipe-page-main

Community feedback

• 

  Krushna Sinnarkar•1,100

  @krushnasinnarkarPosted 4 months ago

  Hi @matheusmirandaalmeida,

  Great Work!

  Here is some suggestions for you:

  Centering and Alignment Adjustments

  Changes:

  • Removing:

    • height: 1300px;
    • position: absolute;
    • left: 50%;
    • top: 50%;
    • transform: translate(-50%, -50%);

  • Adding:

    • display: flex;
    • justify-content: center;
    • align-items: center;
    • flex-direction: column;
    • margin-top: 100px;
    • padding: 40px;

  body {
      background-color: hsl(30, 54%, 90%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column; 
  }
  
  .page {
      width: 600px;
      margin-top: 100px;
      padding: 40px;
      background-color: hsl(0, 0%, 100%);
  }
  
  

  Adjusting Image and Content Layout

  Changes:

  • Removing:

    • background-position: center 30px;
    • height: 260px;

  • Adding:

    • height: 240px;
    • Adjusted padding for .title, .paragraphe, .Ingredients, .Instructions, .Nutrition to padding: 10px 0;

  .image {
      height: 240px;
      background-image: url("../assets/images/image-omelette.jpeg");
      background-size: 520px;
      background-repeat: no-repeat;
      padding: 10px;
  }
  
  .title, .paragraphe, .Ingredients, .Instructions, .Nutrition {
      padding: 10px 0;
  }
  

  Certainly! Here's the detailed breakdown of the changes for the .Preparation class:

  Adjusting .Preparation Class

  Changes:

  • Removing:

    • position: relative;
    • left: 40px;
    • width: 500px;

  • Adding:

    • margin: 10px 0;

  .Preparation {
      margin: 10px 0;
      padding: 10px; /* You may want to adjust padding as needed */
      background-color: hsl(330, 100%, 98%);
      color: hsl(30, 10%, 34%);
  }
  

  Enhancing Table Width and Styling

  Changes:

  • Removing:

    • width: 560px;

  • Adding:

    • width: 100%;

  CSS:

  table {
      display: table;
      width: 100%;
      border-collapse: collapse;
  }
  

  Feel free to reach out if you have more questions or need further assistance. I hope you find my feedback valuable, and I would appreciate it greatly if you could mark my comment as helpful if it was!

  0