Frontend Mentor | NFT card Design challenge coding challenge solution

Elaine• 11,400

@elaineleung

Posted about 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

TobbyFranc• 120

@TobbyFranc

Posted about 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.

TobbyFranc• 120

@TobbyFranc

Posted about 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!

Elaine• 11,400

@elaineleung

Posted about 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

TobbyFranc• 120

@TobbyFranc

Posted about 2 years ago

@elaineleung I cannot thank you enough. God bless

Elaine• 11,400

@elaineleung

Posted about 2 years ago

@TobbyFranc Glad I could help 😊

NFT card Design challenge

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community