NFT preview card built with flexbox/sass
Design comparison
Solution retrospective
Hey community,
I'd love some feedback here. I've got an intermediate understanding of modern layout techniques, and I am always eager to learn. Here's a few questions for the community.
Setting the width and height of the parent containers - what's the "correct" way to do this? I want to make everything into a flex container, but I can't set a defined width/height on those. Do I set that rule on the body element, main, html, a container? In this instance, the desktop width of the primary container should be 1440px and the mobile width should be 375px. I tried to implement those rules, but I'm not sure they are correct.
Media queries - in this example, there really is no "mobile view" but this relates to the question above. I built it mobile-first and then set a media query with min-width (875px) to change the size of the parent container in a desktop view.
Lastly, absolute vs. relative positioning. Am I doing this correctly in this example? It's easy to lose track of what's being positioned in relation to what.
I have access to the Figma and I know how to read the styles. Any tools or tricks that I'm missing to set myself up for pixel-perfect design?
Any and all feedback is welcome if anyone has any suggestions. Thank you!!!
Community feedback
- @dwhensonPosted almost 3 years ago
Hey @CrowdedAstronaut I'll try and answer some of your questions:
Generally, avoid setting heights. If you really have to then you should be really concious of what you are doing and why as it can lead to all kinds of issues with overflow. Just use margin or padding inside the element to achive the height you want.
The one exception to this is the body element. I would suggest setting this to a min-height of 100%. If you do really have to set a height generally go for min-height as this allows the parent to grow if needed.
I see you specifcied both the width and height on the main element, I would avoid this. In this case I would set the min-height on the body element, and add a display of either flex or grid on the body to center the component. Default width of block elements is 100% so you can leave that as it is.
Doing this you shoudn't need the media query. You could set a width on the component as a percentage, but I would just put a fixed width on it and leave it at that in this case.
Your use of absolute and relative positioning looks good. A pusedo element has to be relavitve to something and defaults to the html element unless you position one of it's parent elements. Adding relative changes what it's relative to, without changing the element itself position.
Lovely job though and let me know if anything above isn't clear.
Cheers 👋
Dave
PS I would look into finding a simple CSS reset that you can use as a basis for your projects. They save a lot of hassle. I would suggest Josh Comeau's or Andy Bell's - I use a version of the latter.
Marked as helpful1@CrowdedAstronautPosted almost 3 years ago@dwhenson wow, Dave! that is exactly the kind of feedback I was looking for. Thank you!!!!
1 - @NaveenGumastePosted almost 3 years ago
Hello Ross Phillips ! Congo 👏 on completing this challenge
Let's look at some of your issues, shall we:
-
I think you forgot the
font-weightfor the title -
Too much padding or margin between texts
happy Coding😀
Marked as helpful0@CrowdedAstronautPosted almost 3 years ago@Crazimonk Thanks for the feedback, I can fix those issues easily!
1 -
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