Design comparison
Community feedback
- @correlucasPosted about 2 years ago
👾Hello @zerescas, congratulations on completing this challenge!
Nice code and nice solution! You did a good job here putting everything together. I’ve some suggestions for you:
To make your solution even better and more responsive, you can create a media query to break the elements in the
pricing section
afterwidth: 350px
and make every content in a different row, saving space for low resolution devices..selected-plan-container { display: flex; gap: 0em 1.15em; grid-template-columns: 3em auto 1fr; grid-template-rows: 1fr 1fr; background-color: var(--light-pale-blue); padding: 1.5em; border-radius: 0.8em; margin-bottom: 2.1em; flex-direction: column; align-items: center; } }
✌️ I hope this helps you and happy coding!
Marked as helpful1@zerescasPosted about 2 years ago@correlucas Thanks for the good advice. It's the interesting trick with changing the "display" property on the fly. I did changes in code.
0 - @AkunamoPosted about 2 years ago
Hey Aleksandr I saw your code and its pretty neat and really clean.
But at the footer section you used two div, one with class of top-left-decoration and bottom-right-decoration, instead of that you can use pseudo elements :before and :after, these elements are mostly used for decorative purpose and it helps write less html.
Happy Coding!
Marked as helpful1@zerescasPosted about 2 years ago@Akunamo Thanks for the great tip, I did changes in code.
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