Design comparison
Solution retrospective
I fixed the issue I was having with the elements moving while in a landscape view. I had height at 100vh when getting to larger width screens. This seems to work great but when the page does not have enough height then the elements move around.
I would like help with how to correctly fill the entire screen. Height at 100vh seems to look good but it causes a bunch of problems (other than the one above). If I don't declare a height then a giant white strip remains at the bottom of the page. I set the height of the entire app at 1002px this time. But if there is a taller screen than this then the white strip will appear.
Bottom line are 2 things:
- How to display the entire app without scrollbars for all screen sizes.
- How to display the entire app without a white bottom for all screen sizes.
Community feedback
- @0xabdulkhaliqPosted over 1 year ago
Hello there 👋. Congratulations on successfully completing the challenge! 🎉
- I have other recommendations regarding your code that I believe will be of great interest to you.
LABELS 🔖:
input
elements wants alabel
associated with it
- A
<label>
is used to create a caption for a form control. The<label>
can be associated with a form control either implicitly by placing the control element inside the label element, or explicitly by using the for attribute
- Effective form
labels
are required to make forms accessible. The purpose ofform
elements such ascheckboxes
,radio
buttons,input
fields, etc, is often apparent to sighted users
- Even if the
form
element is not programmatically labeled. Screen readers users require useful formlabels
to identifyform
fields, So here usingaria-label="{values}"
attributes forinput
is enough to be accessible
- Example:
<input type="text" aria-label="First Name" placeholder="First Name" id="first-name" name="first-name">
.
I hope you find this helpful 😄 Above all, the solution you submitted is great !
Happy coding!
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