NFT Preview Card Component - Without Wireframes

Community feedback

• 

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  Your solution look really good but on mobile the upper card snaps, it is not scrollable, I can't see the top of it. I think you should use min height instead of just height and add a margin top to it to fix it. Besides Good job there👍 Happy coding👍

  Marked as helpful

  2

  ---

  

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  @Kamasah-Dickson Thanks for the feedback and kind words, my good man! I tried to replicate the error using Firefox, Safari, on mobile and desktop and can't replicate the bug you're talking about :(

  1

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @ArthurPog try this, when you are developer tools minimize the height of the mobile view not the width, and try to scroll the page and see. I hope u find the bug am talking about 👍

  Marked as helpful

  1

  

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  @Kamasah-Dickson Jesus actual Christ, brother! This kept me up until 5 am. Not gonna lie.

  I seriously found no way of - vertically centering a div in a body that sticks to the top of the screen when the display height gets too short to display the whole content and just let's you scroll to see the rest without cutting anything out from the top. I looked at every conceivable vertical centering method out there. Nothing.

  So, I did it in a very, imo, ugly way, by using conditional CSS that basically has a set of rules for a certain height of the screen and changes to a different set of rules when the height is smaller than the content of the div. I had to go back and actually redo my previous projects because of this. My OCD was killing me.

  I feel there has to be a more elegant way.

  Anyway, thank you for the feedback, my good man. You're green and gold!

  0

  

  Kamasah-Dickson•5,590

  @Kamasah-DicksonPosted over 2 years ago

  @ArthurPog okay no problem Arthur I wish frontendMentor could attach a photo section for us to screenshot and upload our views. Also I want to say that the the design asked us to work the solution up from 375px screen to1440px large screen which I found out you did but am on a small Mobile which is slightly below 375px you know in developer tools we have small, medium and large mobile screens, were the large mobile screen size is the 375px and the medium and small is slightly below. It is no fault of your, I just wanted your solution to work on all the small, medium and large mobile screen sizes. Besides am so sorry but I think you even have more experiences in debugging, I know you learnt something's on the way.

  Have a nice day brother👍

  1
• 

  akhademik•420

  @akhademikPosted over 2 years ago

  for the center the whole thing 1 make body min-height: 100vh, display flex, justify-content center and align item center 2 the same applied to icon and ETH. wrap them around a div and center those element by flex center like i mention above.

  Good luck and happy coding.

  Marked as helpful

  1

  ---

  

  P

  Arthur•290

  @ArthurPogPosted over 2 years ago

  @akhademik My man, you're the man! Thank you.

  I got the same advice from @OGShawnLee on my first project and somehow, either due to my lack of understanding of flex or how vh measurements are used, I implemented it wrong.

  I fixed it now, together with some other issues I was having.

  0