NFT card Design challenge

Community feedback

• 

  Adriano•38,120

  @AdrianoEscarabotePosted over 2 years ago

  Hello! you did a great job in this challenge. Your report has some problems:

  1- the main content is stretched due to the height you set as height: 90vh; we can make a simple change that will solve the problem : main { height: 620px; } You can use other units of measurement this was just an example.

  2- There are some other errors in the HTML that you can check through this link:click here

  Hope it helps:)...don't forget to mark it as helpful 👍

  Marked as helpful

  1

  ---

  

  TobbyFranc•120

  @TobbyFrancPosted over 2 years ago

  @AdrianoEscarabote Thank you so so much! will work on it asap

  1
• 

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  Hi TobbyFranc, there seems to be some issues with responsiveness when I'm resizing the browser, and I see that you got a number of properties in your .main element that's messing it up, especially the width:25%. If you view this on a mobile screen, the width would only be 1/4 of your screen, which is way too small. What I'd do is use max-width instead, so try adding max-width:25rem to your main element, and try to use rem units instead of percentages. Also remove the top and left properties, and also remove position: absolute; you don't want to use absolute positioning as that means your card is fixed on the screen at one spot and won't move even if the browser is resized.

  Lastly, to center the card, add these to your body element:

  display: grid;
  place-content: center;
  min-height: 100vh;
  

  Hope this helps!

  Marked as helpful

  0

  ---

  

  TobbyFranc•120

  @TobbyFrancPosted over 2 years ago

  @elaineleung Sigh of relief! Thank you so much for taking time out. I really appreciate this. This knowledge is golden. This is so helpful. Thank you for being a mentor.

  1

  

  TobbyFranc•120

  @TobbyFrancPosted over 2 years ago

  @elaineleung Please I got 8 HTML issues report (reduced from 11). I have checked the raised issues but cannot seem to understand where the alarm is coming from. Could you help with interpretation, please? I would understand if you are busy too. Anyways, Thank you. You have been really helpful already in my journey. Oshey!

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @TobbyFranc I'll see if I can help with some of this:

  For the issue "The document is not mappable to XML 1.0 due to two consecutive hyphens in a comment": There's an extra hyphen that shouldn't be there. Normally with commented out content in HTML, it should be . In line 11 of you HTML, you have an 3 hyphens instead of you for the closing tag. Just delete one of them and that should work.

  For the issue "CSS: transform: too few values for the property transform": I think this concerns the transition properties in your CSS because I see that you've got them as transition: 0.5s. The transition property is a short form, meaning that it is one property that combines several properties, such as transition-delay, transition-property, etc., and this short form needs at least the transition-property value and the transition-duration, but you only got the duration listed. You need to add the name of the property, or if you instead to have all them "watched", just us transition: all 0.5s.

  With the :host pseudo class error, I'm not exactly sure what's going on but I think it might have something to do with your pseudo element using Font Awesome 6 Free, so try using something else instead. If this is for the eye svg icon, you shouldn't need to use a pseudo element. You can have a look at my solution if you need to: link here

  Good luck!

  Marked as helpful

  0

  

  TobbyFranc•120

  @TobbyFrancPosted over 2 years ago

  @elaineleung I cannot thank you enough. God bless

  1

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @TobbyFranc Glad I could help 😊

  0