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

Responsive Ethereum NFT page using grid and flexbox

@gidado662003

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


Still having problem with how to arrange my css/html code and dont know why it isn't responsive

Community feedback

SrHatcher 710

@SrHatcher

Posted

Hello Gidado! Don't worry if you're struggling doing a project, that means you're in the right way to be better in the future.

I'll change the name of your index2.html to index.html, so that github will know which file it has to show in github pages

You can add min-height: 100vh, display: flex; align-items: center to the body, and you'll see how the main container will align vertically. Adding min-height:100vh will help you occupy all the height of the screen view, no matter what device the user is using.

To use the fonts for the project you can get them from google fonts, i've seen that every project on frontendmentor uses google fonts for the font-family. if you don't know how to use google fonts yet you can watch this tutorial: https://www.youtube.com/watch?v=qgmLDPLApBY

One of the best ways to improve your skills at writing code is to try to make the code smaller. you can try use the less divs you can. by doing this you'll learn when you need to use them or not.

Keep the good work :)

Marked as helpful

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