Design comparison
Solution retrospective
This was my first time using Sass. Any suggestions and criticisms are welcome!
Community feedback
- @vanzasetiaPosted about 3 years ago
👋Hi Henok Hailemariam!
I have some feedback on this challenge:
- The card has full width on mobile view (360px * 640px) and get cut off on landscape view. Do not to limit the height of the page.
- For any decorative images, you should leave the
alt=""
empty and addaria-hidden="true"
to make sure all screen readers will ignore those images. In this case, all images are decorative images. - The
Annual Plan
should never be a heading tag. If you think this is an important information, you can usestrong
instead. - Set your
body
font size withrem
unit. If you do that, it will make it accessible for users to control the size of your page based on their needs.
That's it! Hopefully this is helpful!
Marked as helpful0@henokhmPosted about 3 years ago@vanzasetia Thank you for your feedback!
I used these styles on the body to center the item on the page.
width: 100vw; height: 100vh; display: grid; place-items: center; background-color: var(--clr-primary-400); background-image: url("../images/pattern-background-mobile.svg"); background-repeat: no-repeat; background-size: 100% 50%;
When I disable the
height: 100vh;
rule, the behavior you pointed out no longer occurs. Maybe my approach to center the card was not good. I still do not understand why it behaved the way it did with that rule enabled.As for your other suggestions, I believe I understand all of them. Thanks again!
0@vanzasetiaPosted about 3 years ago@henokhm You don't need to set the
width
of thebody
element and usemin-height
instead ofheight
.Using
height
will not allow thebody
element to grow, that's why the card get cut off on mobile view.Marked as helpful0
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