Design comparison
Solution retrospective
I need some feedbacks please
Community feedback
- Account deleted
hi
For your image you should have used the <picture> element. It takes multiple images and allows you to decide which one to use depending on the conditions you set such as screen size. You also should stop using <div> so much and use more semantic HTML. HTML landmarks are important for adding structure to your page and landmarks such as <header>, <main>, <nav> and <footer> aid navigation in assistive technologies such as screen readers and for keyboard accessibility. For your container <div> use <main> instead, if you decide to keep the attribution in future wrap it in a <footer> element. I do not think there is really any need to have both a container and the card, one encapsulation would be enough and as you had made <body> a flex container an easy way to center your card would be with justify-content and align-items both set to center. It is also not recommended to use 100vh for <body> height as it does not display properly on some mobile browsers, use max-height: 100%.
Congrats on completing the challenge and I hope this helps.
Marked as helpful0@tuliovini13Posted over 1 year ago@madzi-hove Thanks dude, I'll be better.
Have a nice day, and thanks for spend ur time to help me :)
0Account deleted@tuliovini13
That should be min-height: 100% at the end not max-height. We are all here to get get better.
Happy coding.
0
Please log in to post a comment
Log in with GitHub
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord