HTML, Sass

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  👋Hi Henok Hailemariam!

  I have some feedback on this challenge:

  • The card has full width on mobile view (360px * 640px) and get cut off on landscape view. Do not to limit the height of the page.
  • For any decorative images, you should leave the alt="" empty and add aria-hidden="true" to make sure all screen readers will ignore those images. In this case, all images are decorative images.
  • The Annual Plan should never be a heading tag. If you think this is an important information, you can use strong instead.
  • Set your body font size with rem unit. If you do that, it will make it accessible for users to control the size of your page based on their needs.

  That's it! Hopefully this is helpful!

  Marked as helpful

  0

  ---

  

  Henok Hailemariam•40

  @henokhmPosted about 3 years ago

  @vanzasetia Thank you for your feedback!

  I used these styles on the body to center the item on the page.

      width: 100vw;
      height: 100vh;
      display: grid;
      place-items: center;
      background-color: var(--clr-primary-400);
      background-image: url("../images/pattern-background-mobile.svg");
      background-repeat: no-repeat;
      background-size: 100% 50%;
  

  When I disable the height: 100vh; rule, the behavior you pointed out no longer occurs. Maybe my approach to center the card was not good. I still do not understand why it behaved the way it did with that rule enabled.

  As for your other suggestions, I believe I understand all of them. Thanks again!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted about 3 years ago

  @henokhm You don't need to set the width of the body element and use min-height instead of height.

  Using height will not allow the body element to grow, that's why the card get cut off on mobile view.

  Marked as helpful

  0