Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Html and Css

@Bensaxxy

Desktop design screenshot for the NFT preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


all feedback should please come in

Community feedback

@catherineisonline

Posted

Cool solution!

To improve semantics, make sure to wrap the entire code in the main tag not including header or footer tags. It will help to remove report issues and improve accessibility as well.

IF THIS WAS HELPFUL PLEASE MARK IT AS HELPFUL 🀩

Marked as helpful

0

T
Matt Studdertβ€’ 13,611

@mattstuddert

Posted

@catherineisonline, please ensure you're not asking people to mark your comment as helpful. This goes against our community guidelines and can result in your account being flagged if this continues.

Please also be sure not to simply repeat what is presented in the accessibility report, which also goes against our community guidelines.

Marked as helpful

0
Hassia Issahβ€’ 50,670

@Hassiai

Posted

Replace <div class="container"> with the main tag and <div class="attribution"> with the footer tag to fix the accessibility issues.

To center a content on a page, add min-height:100vh; display: grid; place-items: center; instead of giving .container a margin value.

Give .container a fixed width instead of percentage width in the desktop design , in the media query for the mobile design you can give .container a percentage width of 80.

There is no need to give .container .img position: relative.

Hope am helpful Well done for completing this challenge, you did a good job. HAPPY CODING

Marked as helpful

0

@Bensaxxy

Posted

@Hassiai thanks so much ma'am, I will work on that ASAP ☺️

0

Please log in to post a comment

Log in with GitHub
Discord logo

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