Order Summary Page Using Flexbox

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Egemen!

  👍 Good job on completing this challenge! Your solution looks good on portrait of mobile view 🙌. For the landscape, the card touching the top and bottom of the page. You can prevent this, by adding padding to your body element.

  More feedback:

  • 👍 Good job on wrapping the page content with a landmark.
  • 👍 Good job on leaving the alt empty for all decorative images. You might want to add aria-hidden="true" to prevent the VoiceOver screen reader pronounce those images, when it shouldn't.
  • Try to use span and make it display: block to break that into two lines instead of using br tag.

  <p>
            Annual Plan <br> 
            $59.99/year
          </p>
  

  • Use rem or sometimes em instead of px. It's a good practice and also good for user accessibility.

  That's it! Hopefully this is helpful!

  Marked as helpful

  1
• 

  Patricia Hurst•80

  @patricia-hurstPosted about 3 years ago

  Hello, just a few things to point out:

  • for the annual plan and price, either use a <span> to separate them or set the price into a separate tag entirely (such as another <p> and then use classes to style them separately). This allows for much easier styling
  • you have anchor tags that are styled and behave like buttons, so you should be using actual <button>'s with the anchor tags
  • look into using em or rem for padding (I would read up on the difference between them, part of it is user preference and partly sometimes one is better to use in a certain scenario over the other)

  Marked as helpful

  1