responsive nft card using CSS and flexbox

Community feedback

• 

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  Hi

  I'm afraid there are quite a few issues with this. It is overflowing my mobile screen and on landscape view the top of the card is cut off

  These problems are caused by

  • using height instead of min height 100vh - content can't grow beyond if you limit height like that
  • width instead of max width on the card - again that width is wider than my iPhone screen, let it shrink if it needs to
  • height on the card - this is not needed at all and should not be used. Let the content inside the card dictate how tall the browser needs to make it
  • after these changes, remove the widths and heights from all the main image elements rect etc. Again, these are not needed and will introduce bugs. Instead, all you need is display block and max width 100% on the img tag

  Way way more important than any of this though - you are missing interactive elements throughout the html.

  Think about when you use the Web - what does a hover indicate? Interactivity. That means it's essential to use an interactive element for every place where there is a hover style in the design (and adding focus-visible styles as well as the hover).

  On this I'd use anchor tags for all the places where there is a hover style - around the img, inside the heading, and insise the card footer paragraph

  Good luck

  Marked as helpful

  1

  ---

  

  Mariem Bchir•140

  @MabchirPosted almost 3 years ago

  @grace-snow Hi again, your feedback is as usual on point! I am gonna unpack it and research more the "interactive element" piece because I am not familiar with it. Thank you so much, "Marked as most helpful"

  0

  

  Mariem Bchir•140

  @MabchirPosted almost 3 years ago

  @grace-snow alrighty, I tried to incorporate everyone's feedback and things look much better, more fluid. some follow up questions if possible:

  • in .rect , when changing the display:block and max-width: 100%, the width doesn't change to fill the whole container. but if I put width: 100% it works. is there a reason why max-width is not working ?

  • not setting a specific height and letting the components fill up the cards makes sense, but is it ok if the size looks different from the design (my screenshot looks longer than the one on the design?

  0

  

  T

  Grace•31,270

  @grace-snowPosted almost 3 years ago

  @Mabchir Both absolutely fine ☺️

  It's your overlay img you mean you had to make width 100% right? That's because it would need to cover it's parent and it's smaller than the first image

  Still a few issues on this but minor

  • what does logo as an img description mean? Would you know what that img looked like purely from that description? Probably not
  • Content is hitting sides of mobile screen - a little padding on a wrapping element like body or margin on the card should fix
  • Anchor tag should go inside the h1 not the other way around
  • use meaningful elements like paragraphs, not spans alone (used in price and time left text in this)
  • Put class for the author name on the anchor tag - no need for a span. General rule is try not to bloat html if it's not needed

  Good job on this though, it's looking really nice now 👍

  Marked as helpful

  0
• 

  Sebastian•1,580

  @dnksebastianPosted almost 3 years ago

  You can easily get rid of the shaky hover effect:

  • delete the 'visibility' rules both from the '.rect' and '.main-img:hover + .rect' selectors,
  • set 'opacity: 0' rule in the '.rect' element,
  • change your last selector ('.main-img:hover + .rect') into: '.rect:hover' and there set 'opacity: 0.5'.

  Marked as helpful

  1

  ---

  

  Mariem Bchir•140

  @MabchirPosted almost 3 years ago

  @dnksebastian Thanks so much Sebastian I will go ahead and introduce those changes and see what happens.

  1

  

  Mariem Bchir•140

  @MabchirPosted almost 3 years ago

  @dnksebastian it worked nicely ! thanks again

  1
• 

  Naveen Gumaste•10,480

  @NaveenGumastePosted almost 3 years ago

  hay! Mariem Nice work

  Marked as helpful

  0
• 

  Momen Hakim•120

  @MomenHakimPosted almost 3 years ago

  good job Mariem , you can check the height to be exactly the same, try to but the height to "fit content" maybe will help.

  Marked as helpful

  0

  ---

  

  Mariem Bchir•140

  @MabchirPosted almost 3 years ago

  @MomenHakim Thanks Momen! I will give it a try and check-in again if there are other issues

  0