@vanzasetia
Posted
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
@Fasunle
Posted
@vanzasetia Thanks so much. I have made the corrections you could check it again.
🎉
@vanzasetia
Posted
@Fasunle I would recommend removing the nav element since it's empty.
@Fasunle
Posted
@vanzasetia I included the empty nav just for accessibility
@vanzasetia
Posted
@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?
@Fasunle
Posted
@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.
@vanzasetia
Posted
@Fasunle No problem! I understand now. 👍
@Fasunle
Posted
@vanzasetia thanks
