Recipe page using styling variables

Community feedback

• 

  JdccDev•60

  @jdcc1024Posted 3 months ago

  Hi Andreea,

  I took a look at your margin issues. On my screen the deployed app looks similar to what was shown in your chalenge screenshot. Maybe it has to do with our screen resolution?

  It seems some of the code you added in the beginning could be causing the problem. Removing this fixes your recipe card's y-axis placement.

  /*    3. Allow percentage-based heights in the application  */
  html,
  body {
    height: 100%;
  }
  

  Then you can adjust the margin-top of the card class to make it look closer to the screenshot.

  Another suggestion you can look into is using the <table> element for your nutrition list at the end. a table with 100% width will look closer to the example as well :)

  Keep up the great work!

  Marked as helpful

  1