Responsive Recipe Page using Flex box and grid

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted 4 months ago

  Hi there,

  This doesn't look like the design for me and all is hard to read because the font-family set to cursive instead of using the fonts as defined in the style guide.

  You seem to have made this more complicated than it needs to be. Instead of using width for the component all it needs is a max width. And the only change needed in a query on this is increased padding and border radius on the component on larger screens.

  The main goal of this whole challenge is all about writing meaningful and appropriate html. It's meant to stretch that skill in you of translating a design into the appropriate accessible HTML. You've not done that too badly, but there are some important issues that you need to fix.

  1. There are missing strong tags unnecessary spans.
  2. The nutrition table must be a data table. It must not be display grid because that actually can change the semantics of it, and there's no need for that anyway. It really is a simple data table.
  3. That data table must use header cells in the right place.
  4. Those header cells should use the scope attribute to make it clear they are headers for the row and not column.
  5. On a recipe page the image is really important. You can't say that this content would be the same without that image. Therefore, it needs an accurate alt attribute that describes it offering the same value as the image itself does. Alt shouldn't include words like "image" or "Picture" because it's already an element. There are some great posts in the resources channel on discord about how and when to write alt text if you want to take a look.
  6. All content should be contained within landmarks. The recipe component should sit within a main landmark. And the attribution should sit within a footer landmark.

  ⚠️ NEVER ever ever do this!!

  This Page Cant be Display
  Due to your screen smaller than 350px, this page wont be able to be display on your browser. We regret you been unable to view our website. We would work to make it available for you screen very soon.
  

  I am really shocked to see this honestly. It is an essential (and legal) requirement for all sites to work at 320px by 256px (WCAG success criterion Reflow 1.4.10).

  And this is a really simple HTML site with basic content where there is no reason at all why it shouldn't work on small screens. It would work by default, it's our CSS that often breaks sites for people.

  By doing this you are intentionally excluding people (including me who has an iPhone 12 mini) from accessing content.

  1

  ---

  

  Ayomide philip•160

  @Ayomide-PhilipPosted 4 months ago

  @grace-snow Thank you

  0