Design comparison
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
- @javascriptor1Posted over 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 helpful0@mikej321Posted over 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
0 - @rmartin93Posted over 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 helpful0@mikej321Posted over 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.
0@rmartin93Posted over 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 likemargin-top: -4px
or something like that can fix those kinds of issues, but your stuff looks centered to me.0
Please log in to post a comment
Log in with GitHubJoin 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