Design comparison
Solution retrospective
I had problems with responsiveness of the page. Creating desktop version was not that hard, but then I couldn't make it work on mobile. I changed flexbox direction to column, but screen was cut on the top. I made body height bigger with media query and managed to fix it, but I guess that is not optimal solution. I would be really glad to receive feedback so I can improve!
Community feedback
- @hitmorecodePosted over 1 year ago
Congratulations well done. I took a look at you CSS and I think I found the problem. After playing with your CSS I found out that the max-height in the main was messing up everything. Try these changes and see for yourself
main { display: flex; flex-direction: row; margin: auto; max-width: 58rem; /* max-height: 27rem; */ ## you can remove this line } @media (max-width: 1024px) { ## remove these /* body { height: 90.8rem; } */ main { flex-direction: column; /* justify-content: space-between; */ ## remove this /* align-items: center; */ ## remove this max-width: 20rem; min-height: 58rem; ## change this line padding: 50px 0; ## add this }
Marked as helpful1@UnkookerinhoPosted over 1 year ago@hitmorecode Thank you for your feedback! It works and looks better now! I deleted "min-height: 58rem;" entirely because it was basically useless. You were right about max-height of the body messing up everything - thank you for your answer once again :)
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