Recipe page for desktop

Community feedback

• 

  Charan•50

  @CharanMN7Posted 6 months ago

  Hey Samuel!

  Saw you needed a little help with Mobile design and styling lists. Here are a few things that'll help:

  For the mobile design,...

  • Remove the top and bottom margins of your content container
  • For the image to go full width, you can remove the padding of your content container and add margins to the <div> tags that you created for the different sections of the content.

  For styling the lists...

  • You can play with the padding property of the <ul>, <ol>, and <li> tags until it feels right

  Here are some other things you may want to consider...

  • I see that you used a list for the "Nutrition" section. You could replace that with a <table> instead, that would make it easier to style that part of the webpage
  • I see that you used a lot of <div>s and <h1>s inside them. It is usually recommended that you use only one <h1> tag per page. To give more sematic meaning to your code, you can replace your <div>s with <section> tags (which behave exactly like <div>s) and change the <h1>s to <h2>s inside them.
  • Also, looks you missed using font-family: "Young Serif" for the headings.

  Hope it helps!

  Marked as helpful

  0