Flexbox solution

Community feedback

• 

  Vanza Setia•27,715

  @vanzasetia

  Posted almost 4 years ago

  👋Hi Antony!

  👍Good job on completing this challenge!

  I hay some feedback on this solution:

  • The card is almost has full width on mobile view (360px * 640px). Try to add padding on your body element.
  • I noticed that the HTML lang attribute has value es, which is Español based on what I see on MDN about lang attribute. The problem is that, the current page has English language not Spanish. So, I recommend to keep value of the lang attribute with en.
  • The Proceed Payment should have bolder font weight.
  • For any decorative images, which in this case, all images are decorations only. You should leave the alt="" empty and add aria-hidden="true" or role="presentation", to make sure all screen readers ignore those images.
  • Also the alt (Alternative text) should not be hyphenated. It should be descriptive for human to read.
  • Order Summary should be a heading tag. It is the title of the card.
  • You should wrap all your page content with main tag. I'm not sure why Frontend Mentor doesn't report any accessibility issues.
  • Are trying to make all elements set to box-sizing: border-box? If so, you should add box-sizing property to the html element.

  *, *:after, *:before{
      box-sizing: inherit;
  }
  
  html {
    box-sizing: border-box;
  }
  

  • You should never change the root font size. I recommend to keep the default behavior to make sure that every device and browser will render the size correctly.
  • The body font size should also use rem unit.

  That's it! Hopefully this is helpful!

  00