Recipe Page using CSS Grid

Community feedback

• 

  T

  Grace•31,090

  @grace-snowPosted 6 months ago

  I'm afraid this isn't finished. It should work on mobile by default (there's no need for a media query even in this one) but it currently overflows badly.

  I also noticed these things:

  • Remember strong tags are for adding bold emphasis.
  • The table needs to use heading cells (th) for the heading content (eg "Calories") not standard cells (td).
  • These heading cells should also have the scope attribute set to "row" to make it clear they are headings for the cell next to them not below them.
  • get into the habit of including a full modern css reset at the start of the styles in every project. Andy Bell or Josh Comeau both have good ones you can look up and use.
  • the body shouldn't have a height of 80%. It needs to be able to be as tall as it needs to be based off the content.
  • remove all the percentage widths in this. All the component needs is a single max width in rem. Nothing inside it should have an explicit width or height.
  • the image should not have a width or height. The css reset would already set it to be max-width 100% which prevents overflow. If you want you could give it a width of 100% and an aspect ratio property (the aspect ratio would improve page performance a little).
  • Font size must never be in px.

  I hope this is helpful.

  Marked as helpful

  0

  ---

  

  T

  Grace•31,090

  @grace-snowPosted 6 months ago

  The outstanding problems seem to be caused by the width 50% you've left on the component. Remember the guidance above - remove these and use a single max width in rem.

  Also body font size and line height is still in px. Read the linked article.

  0