Submitted about 1 year ago

NFT-bootstrap solution

Michael Johnson• 970

@mikej321

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

NFT preview card component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Second project using Bootstrap. I've done a full video course on bootstrap and trying to learn how to use it on my own but I still feel like I'm doing it wrong. One big issue I have is when to actually use a bootstrap container and when to use flex. Also, I dealt with weird issues where some things wouldn't center as they should (I suspect it is due to a conflicting bootstrap property). Anyone willing to look at my code and give me some pointers? Many thanks in advance!

Michael

Community feedback

Mohammed Fakih• 1,590

@javascriptor1

Posted about 1 year ago

Hi Michael Johnson ,

Excellent work. 1 thing needs to be changed for better result : For active state , try to change opacity for cyan color to something around ~40-50% so when you hover over the picture , the Ethereum image appears below.

Marked as helpful

Michael Johnson• 970

@mikej321

Posted about 1 year ago

@javascriptor1 Many thanks, Mohammed! I changed my design with your suggestion and it looks much better. I can't believe I even missed that haha! Thanks again!

Michael

Ryan Martin• 240

@rmartin93

Posted about 1 year ago

Can you give an example of a situation where you were trying to center something and couldn't?

As for container vs flex, they aren't really related. Containers are for controlling max-widths essentially, and rows are where the flex comes in.

As for row vs flex, I personally will use flex if I don't want to deal with the column gutters stuff, but most of the time rows and columns work great.

Hope that makes sense!

Marked as helpful

Michael Johnson• 970

@mikej321

Posted about 1 year ago

@rmartin93 Thanks for the super quick reply! The centering issues were with very weird cases like the profile image with the 'creation' text next to it. Also, the icons wouldn't properly center with their text in the ethereum counter and days left div. I couldn't get it to center for the life of me, but I left it as is. Now, what will be super funny is if my eyes are playing tricks on me and it is centered haha but it felt a little off to me.

Ryan Martin• 240

@rmartin93

Posted about 1 year ago

@mikej321

Ah, I think yours are centered, but I know what you're talking about.

Sometimes with buttons in particular and icons, I'll have to make a class like btn-icon for dealing with icons not centering properly. Usually something like margin-top: -4px or something like that can fix those kinds of issues, but your stuff looks centered to me.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord