Recipe page

Community feedback

• 

  Chandra•180

  @ChandrakhdPosted 9 months ago

  Hi K, Based on your question yes, I have also notice some gap issues on the couple of places. But it can easily be resolve. From my understanding that the each of the tag comes with the default padding, margin, and box sizing set to content box which will sometime led to the space issue if you keep adding the padding or sizes. setting the margin and padding on the p that will do it. padding: 0; margin: 0; box-sizing: border-box.

  Thanks.

  Marked as helpful

  1

  ---

  

  K•120

  @lilythelilyPosted 9 months ago

  @Chandrakhd Thank you for your advice! I will definitely try that. :)

  0

  

  Chandra•180

  @ChandrakhdPosted 9 months ago

  You are welcome. @lilythelily

  0
• Account deleted

  Hi K,

  The reason there is spacing between 'Preparation Time' and the list below it is because the <p> and <ul> elements have default margin styles that are being applied. You could target either the margin-top on your ul or margin bottom on your p to reduce the space.

  As an example, you could add this to remove the space above the list:

  ul {
      margin-top: 0;
  }
  

  Or, you could apply 'box-sizing: border-box' to the root element along with 'margin: 0'. This will give you a 'reset' which will remove the default margins on everything and make all your elements more predictable to work with. Here is a helpful resource on box-sizing.

  Also, dev tools in your browser are your friend when you want to see what's going on under the hood. Hope this helps!

  You did great :D

  Marked as helpful

  0

  ---

  

  K•120

  @lilythelilyPosted 9 months ago

  @lexborron Thank you so much for your detailed answer. I will try to “digest” your advice by reading over and over…:) Also, thanks for the url for the article. I am sure it will be of great help for me to understand the box model.

  1

  Account deleted

  @lilythelily You're welcome! Let me know if there's anything you're stuck on. I edited what I originally wrote to try to make it more clear.

  Marked as helpful

  0

  

  K•120

  @lilythelilyPosted 9 months ago

  @lexborron Thank you very much for taking your valuable time to follow up! I read your answer and the article you mentioned carefully. It helped me a lot to understand how much I misunderstood the concept of “margins.” I realized that I need to acquire new perspective when coding. This obstinate “designer” perspective must be obstructive when one learns to code.

  0
• 

  Jeffrey Stanley•130

  @JS-LawPosted 9 months ago

  Hey K,

  I’m not sure what you mean about the line space but I suppose it could be from the <p> that the title was wrapped in.

  For your next project, look up how to add variables to :root. It’s game changing and will clean up your css a bit and make it easier to read/add colors and fonts.

  Overall though it looks great and you should be proud!

  Marked as helpful

  0

  ---

  

  K•120

  @lilythelilyPosted 9 months ago

  @JS-Law Thank you for your answer! Yes, I will learn how to add variables. So much to learn… :)

  0