Recipe page using HTML and CSS

Community feedback

• 

  Ashong•930

  @AshongAbdallah06Posted 6 months ago

  1. Because the <figure> tag you used around the image has default margins around it. And since you specified 100%, it took the whole width of the figure.
  2. I don't really understand the question. But if you mean the whole background then I don't think it's the rose color but rather the eggshell (hsl(30, 54%, 90%). You might wanna give the body more margin or padding on the sides.
  3. Same as Number 1. Some elements have default styles on them already. In your case, <h1>, <h2> and <p> have default margins. And you've also added paddings to them. That is why there is so much space between them.
  4. That is the behavior of tables.

  Solution

  First, you need a reset to remove all default margins and paddings at the top of the page.

  * {
      padding: 0; 
      margin: 0; 
      box-sizing: border-box;
  }
  

  This will remove all default paddings and margins on elements like <p> <h1> etc...

  Now you can specify your own spacing to match the design. This should solve most of your problems.

  For the table section, you might want to use flexbox

  <div class="row"> 
      <div>Calories</div>
      <div>277kcal</div>
  </div>
  
  
  

  Style it to match the design. I hope this makes sense.

  Marked as helpful

  0

  ---

  

  Araya•20

  @AD-AndersonPosted 6 months ago

  @AshongAbdallah06 Thank you! I really appreciate the feedback. It helped me a lot. It now looks more close to the design but still a little off. For the second ques, I meant for "Preparation Time" the rose white color for the background, I still can't figure out. I also feel the entire page needs to be centered and I can't get it to center. Would you happen to have any other suggestions on how to do that?

  0

  

  Ashong•930

  @AshongAbdallah06Posted 6 months ago

  @AD-Anderson I'm guessing you created the mobile design first. So to center the entire page, you might want to wrap the whole thing inside a div.

  <div class="upper-container"> // Call it whatever you want
      <header>Header markup here</header>
      <main>Main content here</main>
  </div>
  

  And then apply these styles

  Styles.css

  body {
      font-family: "Outfit", sans-serif;
      background-color: hsl(30, 54%, 90%);
  }
  .upper-container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      width: 30rem;
      margin: 0 auto;
      background-color: white;
      border-radius: 0.5rem;
  }
  

  You can change the width to your desired one.

  Tip: You might want to add a border-radius on the image too and add padding to the Nutrition section.

  Additional Tip: It's best practice to wrap everything inside a container at all times.

  Marked as helpful

  0