QR Code UI

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Fasunle! 👋

  About the responsiveness, you could actually do this challenge without any media query at all. So, what you should do is by setting a width: 100% and a max-width to the card element and then add some padding to the body element to prevent the card from having full width and height on mobile view.

  Also, never limit the height of the body element by setting a max-height. I would recommend using min-height if you need to set a height. You might find it helpful if you think of a body element as a paper, so obviously, instead of limiting the width and the height of the paper, you instead of limiting the element inside it.

  Worth mentioning that you need to wrap all the page content with the correct landmark elements. Wrap the card with main landmark and your attribution with footer landmark.

  That's it! Hope this helps. 😊

  Marked as helpful

  0

  ---

  

  Kehinde Hussein, Fasunle•190

  @FasunlePosted over 2 years ago

  @vanzasetia Thanks so much. I have made the corrections you could check it again.

  🎉

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Fasunle I would recommend removing the nav element since it's empty.

  0

  

  Kehinde Hussein, Fasunle•190

  @FasunlePosted over 2 years ago

  @vanzasetia I included the empty nav just for accessibility

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Fasunle As far as I know the nav element contains internal navigation for the site. nav should live inside the header element and the header element must live outside the main element to have semantic meaning (landmark). Also, the header should only contain the logo and nav element. I don't see any benefit of having an empty nav.

  So, Why does having an empty nav is good for accessibility?

  0

  

  Kehinde Hussein, Fasunle•190

  @FasunlePosted over 2 years ago

  @vanzasetia Thanks for your contribution, I thought having an empty nav is better than none. In a real-life web, I think the nav tag will never be empty but I was just creating a "kind of" template for full web.

  I hope you understand the reason for my decision.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @Fasunle No problem! I understand now. 👍

  1

  

  Kehinde Hussein, Fasunle•190

  @FasunlePosted over 2 years ago

  @vanzasetia thanks

  0