NFT component using HTML and SASS

Community feedback

• 

  Éric Férole•420

  @Eric-FerolePosted over 2 years ago

  Great job ! It look pretty much as the design. Few littles things that are almost invisible but I thing I worth doing it.

  • The margins of your .title are not accurate. Think of resetting some the CSS default value by adding a CSS reset (* { margin: 0; }) and then adjust every margin manually to gain more control. Here is the one I use : My Custom CSS Reset
  • Put the margin on the outer block instead of inner element. Per example, the <p>s of .additionnal-info have margins on them. The margin should be on .additionnal-info.
  • Instead on adding a fix height on your .image you can add a display: block; on your image to make your image fit in the .image perfectly.
  • You should not use fix height for your components. By doing so, you prevent the div to expand if we add more content dynamically. The box size of your block plus the margins should be all you need.

  Hope it helps. Keep up the good work ! :)

  0
• 

  stenito•80

  @stenitoPosted over 2 years ago

  Hi there,

  Nice work!

  When I looked at your solution website on mobile, I noticed you are using 100vh to set the height of the container. In your case, the body tag.

  I used to do that too until I noticed, it hides some of the page under the navigation bar of safari on iOS when it’s set to be in the bottom (default since a few version).

  You can solve that by using height: 100%; and min-height: 100%; on both the HTML tag and the body tag. This way, the content will not be under the nav bar!

  100vh is the height of the viewport without subtracting the navbar that hides when you scroll. 100% is the height of the visible viewport and gets bigger when the navbar hides when you scroll.

  A lot of websites use 100vh to show cookie modals and on iOS safari, the buttons are often under the navbar… which is anoying :)

  0