Responsive Order summary component using flexbox
Design comparison
Solution retrospective
This is my first challenge in frontend mentor. Please how do I create space between elements using flexbox. I had issues using flexbox to create more space between elements in my grid class. I would love the community to review my code, outline my mistakes and also recommend best coding practices to help me be a better a developer.
Community feedback
- @VladimirBrscicPosted almost 3 years ago
Hi, you did pretty good for first challenge and you used flex very well for centering the .container class element. I would suggest setting min-height: around 110vh on .container and .order-summary class element to width: 85%. That way you will have nice space around that main card in mobile view. Desktop view looks nice. Happy coding.
Marked as helpful0@JohnIdenyiPosted almost 3 years ago@VladimirBrscic thank you very much. I'll certainly do that. Pls I have a question. What is difference between min-height and height. I only understand min-width when it comes to media queries.
0 - @VladimirBrscicPosted almost 3 years ago
Hi, 'min-height' of for example 200px on let's say some container will ensure that it will be at least 200px tall. But if it has a lot of content inside it will grow taller. If you would set it to just 'height' of 200px it would always stay to 200px and would have scroll bar to adjust overflowing content. It's very good practice to almost always set height to min-height.
0
Please log in to post a comment
Log in with GitHub
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