Hi, this needs much of the same feedback as I've already left on your social links solution so make sure you apply the relevant parts here. Plus there are some very important extras needed in this one!
- All content in this design must go inside the
mainlandmark. You can have sections within that if you wish but there is definitely no content in this that belongs in aheaderand everything must be insidemain. - This image is important content and must have a proper alt description.
- The nutritional table is tabular data so must use a table element. The header cells need to be marked up correctly as header cells, and include the scope attribute.
- The component needs a single max width in rem. There shouldn't be different max widths once all.os properly inside the one container. (This container could be the main landmark but it's more usual to use a div inside main for this kind of component as on a real site it is unlikely that every page would have this exact styling on the main landmark.)
- Styles should be mobile-first and media queries must be defined in rem or em not px. There are accessibility and layout problems when media queries are done in px.
0
