Frontend Mentor | NFT Preview Card Component coding challenge solution

Community feedback

@CharlieeLuna23

Posted about 2 years ago

Nice job!

One tip I can provide for centering the container is to use "display: flex;" with a some more styling, that's the solution I used and most people use for this cards projects and it will help in the future. In this situation you only have that card but if you were to add more content the "absolute" would cause a problem I believe.

Marked as helpful

Omar Gutierrez Tafur• 20

@omargtdev

Posted about 2 years ago

@CharlieeLuna23 Yeah! I considered that concept. It'd be with a "display: flex" with "justify-content: center" and "align-items: center", I think, having in mind that the container needs a width and height respectively.

Pradeep Saini• 990

@pradeeps4ini

Posted about 2 years ago

Hi, Omar. Excellent jobs implementing the design.

I would like to suggest some changes, if you don't mind.

Use semantic markup for your HTML. It will be good for accessibility and readability.
Font size of the paragraph "Our Equilibrium collection promotes balance and calm.", changes in the mobile mode. You can use clamp() function to do that.
A suggestion i got from my implementation. Use a unitless line-height value to Avoid unexpected results due to inheritance behavior. Read here: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#prefer_unitless_numbers_for_line-height_values.

I got some good suggestions on my implementation. You can read them here... https://www.frontendmentor.io/solutions/responsive-nft-card-2G7sVtTku9#comment-62bd9362a10af2558a400cf6

Tobias Fuchs• 40

@ToFu96

Posted about 2 years ago

@pradeeps4ini

Personally, I'm not so sure if using clamp for font size is a good idea. I visited a few known websites and they don't use clamp. To reduce font size on small devices, they seem to use breakpoints or simply "activated" horizontal overflow (horizontal scrollbar) so that layout always stays the same.

Maybe that has to do with clamp being a fairly new feature, meaning that not many websites started using it, but my assumption is that things get harder (more unpredictable) to design consistently with clamp as opposed to using fixed values. One advantage of clamp over other approaches is that you need fewer CSS rules though.

Pradeep Saini• 990

@pradeeps4ini

Posted about 2 years ago

@ToFu96 clamp() is supported by all the major browsers. https://caniuse.com/?search=clamp().

With clamp you can have fluid typography, which is better than what you get with breakpoints. https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/

NFT Preview Card Component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community