Order Summary complete(ish)

Community feedback

• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  As far as the accessibility warnings, change the Order Summary to an H1, and your Annual Plan text to an H2. Your pages should always have an H1 if possible. You may have to change the font size to fit the design. Wrap all of your main content in a Main tag and change the attribution div to a Footer and that will fix the accessibility warnings. Download AXE DevTools to check accessibility while you are coding. https://www.deque.com/axe/devtools/

  Marked as helpful

  1
• 

  P

  David Turner•4,150

  @brodiewebdtPosted almost 3 years ago

  I have a few suggestion to make that will make your design responsive and better looking. You should start coding mobile first 375px. Websites are naturally responsive and require less code to style them. Add Media Queries for the larger screen size. Your Media Query is not taking effect because the is been overwritten. Try not to add Heights on anything if you can. Adding this code in the body tag will center component in the screen, after you remove the Media Query on the body tag: display: grid; justify-content: center; align-items: center; height: 100vh;

  In your container you have a width of 25% which is squeezing the size of your card. Remove the width and the height from the card will make a big difference with this card. In the Figma file this card has a maximum width of 450px, so you can add a max-width of 450px to the container and it won't stretch.

  Hope this helps.

  Marked as helpful

  1