Responsive Order Summary Page

Community feedback

• 

  P

  Andreas Remdt•950

  @andreasremdtPosted over 2 years ago

  Hey @naomidzunic,

  Congrats on finishing this challenge, it looks really good! A couple of suggestions:

  1. As the accessibility report already says, you could use a main element for your container instead of a div. This ensures that your markup is even more semantic and can be better understood by search engines and screen readers.
  2. The "Change" button inside the plan box is a p element, which doesn't really seem to fit here. I think the design means this to be a link or button the user can click on to change the annual plan. So, either an a or a button would be more suitable. If you are using a button, make sure to give it a cursor: pointer, so that the user's mouse additionally indicates that this element is clickable. Right now, it might be confusing for some users.
  3. Your card is nicely centered on the page, but you get scrollbars real soon as you mentioned already. @BenjaDotMin made a great suggestion, I'd go with that one to easily fix it :)

  Marked as helpful

  0
• 

  Benja.min•740

  @BenjaDotMinPosted over 2 years ago

  Hello Naomi! Apologies if I read this wrong, but we can very easily center your card, and remove the scrolling.

  On your .container tag, remove: margin: 25% auto 25% auto; (also the media query margin at 510). On your body tag add: display: grid; place-items: center; height: 100vh;

  And that should center things up nicely :) Great work, you have made the card itself very clean.

  1