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
scopeattribute 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
