Responsive Order summary using Flexbox

Community feedback

• 

  Raymart Pamplona•16,100

  @pikapikamartPosted about 3 years ago

  Hey, awesome work on this one. Layout in general looks great

  Some suggestion on the site would be:

  • It would be great to have a base styling with these properties

  html {
    box-sizing: border-box;
    font-size: 100%;
  }
  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }
  

  This way, handling an element's size will be lot easier because of the box-sizing: border-box. You can search up some more of how this works.

  • Always have a main element to wrap the main content of your page. On this one, the .main should be using the main instead of div.
  • Avoid using height: 100vh on a large container like the .main selector as this limits the element's height based on the remaining screen's height. Instead use min-height: 100vh, this takes full height but lets the element expand if needed.
  • Also on the .main to fix the background, you would need to add:

      background-color: hsl(225, 100%, 94%);
      background-repeat: no-repeat;
  

  • When using an img tag, always remember to include the alt attribute even if the value is empty or not. If you did not include this, screen-reader will instead read the source path of the img which you don't want to happen.
  • 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. Meaning this will be hidden for sighted users and only be visible for screen-reader users, search about sr-only stylings and see how it is used. The h1 text should describe what is the main content is all about, this h1 would be placed as the first text-content inside the main element. If you are confused about this, you can for now use h1 on the order summary but it is good to be aware on this kind of thing.
  • annual-plan could use a heading tag since it gives an information on what the section will contain.
  • Lastly, when using a tag, don't forget to add the href attribute so that the a tag will function properly.

  Aside from those, great work again on this one .

  Marked as helpful

  1

  ---

  

  mcclellangg•30

  @mcclellanggPosted about 3 years ago

  @pikamart Wow that was a very thought out and helpful solution. Thank you very much!

  1