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-preview-card-component HTML & CSS

Jana 110

@janamanzana

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


Hi, I'm just starting and that's my first ever programming project. I would really appreciate your comments and suggestions. I have struggled a lot with positioning and media queries.

  1. Question: I have noticed that the project looks good at 75% zoom but on 100% it's too close, how do I fix it? Should I always code considering 100% zoom and adjusting sizes by it?

  2. Question: Which media queries should I use and how many of them?

Community feedback

@papilo-cloud

Posted

--Yea it's preferable to design at 100%, and for media Queries, you don't need it for this design since it has a fixed width...

Marked as helpful

1
P
David Turner 4,110

@brodiewebdt

Posted

The card is actually too big for the design. In the Figma file the mobile version is 327px and the desktop version is 350px. I would design it for a maximum of 350px. I'm not sure why you are using zoom, but you want to design for 100% as that will create the most accurate design. As far as media queries, you don't need them for this project as it doesn't change much in size. Once you have larger projects you will use them. There really is no one set of media queries to use for every project. It will depend on the design you are working on. You may use two or three for some designs and it is possible you may use one just for a specific section. One of the projects I recently finished I did just that. I had a media query set for one element.

Marked as helpful

1

Jana 110

@janamanzana

Posted

@brodiewebdt Thanks! :)

1

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