Order summary component

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, great work on this one. Layout in general looks great, responds well but for mobile view, the layout could adapt to small size.

  I like pizza and for some suggestions on the site if you would like as well:

  • body tag has no height because the main content is position: absolute which is not great. Avoid using position: absolute on large element on your site since this makes the element out of the flow, you don't really need this stylings on the .card:

  position
  left
  right
  transform
  margin
  top
  

  On the body tag just use:

  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  

  • Always have a main element to wrap the main content of your page. On this one, the .card should be using the main instead of div.
  • Also, use max-width: 350px on the .card instead of width: 350px so that it will adapt even in small screen's width.
  • Those decorative images on the site could have use an extra aria-hidden="true" attribute so that they will be totally hidden.
  • A page must have a single h1 on a page. Since there are no text-content that are visible that could be h1, you will make the h1 screen-reader only text. The h1 text should describe what is the main content is all about and this would be placed as the first text-content inside the main element.
  • annual-plan could use a heading tag since it gives overview on what the section will contain.

  Aside from those, site looks great.

  Marked as helpful

  1

  ---

  

  Alex Daniel•700

  @p-alexPosted about 3 years ago

  Thanks for the suggestions @pikamart! I'll try to fix everything!

  1