Design comparison
Solution retrospective
Is there anything I should be doing differently? I use flexbox a lot, is there a better way I should be centering things? (Like the eye icon when you hover over the image, and the price and ETH icon and time and clock icon) Thanks!
Community feedback
- @Cooly-o-CatsPosted over 2 years ago
This solution is great! Flexbox seems to be the right way to go in most of these situations for the design. The only thing I would change is giving the card a margin between the top and bottom of the screen!
Marked as helpful1@AdamElitzurPosted over 2 years ago@Cooly-o-Cats thanks! When you say margin between top and bottom, what do you mean? I still need it if I used flexbox? Also, when it says I need to have a mobile version, do I have to use media queries or is it fine how I did it where it auto resizes?
0@Cooly-o-CatsPosted over 2 years ago@AdamEli Sorry, I made it seem quite confusing the flexbox seems to be working fine now, but when the height of the screen is too small some of the card gets cut off. You can fix this by changing the body's
height: 100vh;
tomin-height: 100vh
. Hope this helps!Marked as helpful1@AdamElitzurPosted over 2 years ago@Cooly-o-Cats Oh, I saw it doing that and wasn't sure why. But why min-height and not max-height? Also, what I said before, do you know if I need media queries? Thanks so much!
0 - @GitHub-dev12345Posted over 2 years ago
used this CSS Property in your card to increase and decrease the size of card: 1.In Card design CSS Code Used this: transform : scale(0.9); large size for increase the number of scale & small size for decrease the number of scale
1
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