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

NFT layout using HTML and CSS

@astijusk101

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


How could I make the mobile layout better? In the design file given, it seems as if there is more space between the edge of the window and the NFT card, however in my project there isn't. I don't know how to add it.

Community feedback

kirty 380

@kirtymeena

Posted

Hi,

The UI part looks nice but it's not responsive, you need to add media queries (mobile first or desktop first approach) and use min-width or max-width. You can read more about mobile first and desktop first here

To add space on the left and right sides, inside media query for small screen add

body { 
      padding-inline:2rem;
}

Keep coding.

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