NFT Preview Card Component

Community feedback

• 

  CharlieeLuna•260

  @CharlieeLuna23Posted over 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

  1

  ---

  

  Omar Gutierrez Tafur•20

  @omargtdevPosted over 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.

  0
• 

  Pradeep Saini•990

  @pradeeps4iniPosted over 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

  2

  ---

  

  Tobias Fuchs•40

  @ToFu96Posted over 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.

  1

  

  Pradeep Saini•990

  @pradeeps4iniPosted over 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/

  0