
Design comparison
SolutionDesign
Solution retrospective
What are you most proud of, and what would you do differently next time?
I'm happy with the result.
Next time I would like to implement the component in react.
What challenges did you encounter, and how did you overcome them?I had problems with:
- Resizing the card with the image
- I solved it using max-width in px in card class
- Placing the card in the middle of the screen
- Solved it with min-height on body
- Had to use a value lower to 98vh to avoid scroll bar (overflow) and high enough to fit the card in the center of the screen.
- Solved it with min-height on body
- Adjusting spacing between text
- I just created 2 little classes to modify top and bottom margin
I have some questions in the following topics:
- It's fine to add/modify body style?
- As I did to solve 2nd problem
- There is a better solution to fix spacing between text and card?
- Maybe inline style on instead of 2 one line classes on stylesheet?
- Should I add always min-width to my componenets in order to meet small screen (320px) requirements (WCAG (I didn't read the guidelines only the tip))
Community feedback
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