Simeon Udoh• 535
@simeon4real
Posted
Hello, About my solution, I can add text to the labels and use display: none; for the label, will it work?
0
Design comparison
Solution retrospective
There's an annoyingly huge amount of whitespace on the bottom. I would appreciate it you tell me how to fix it.
That's why the padding of 3rem on screens > 600px is only applied to the top, left and right but not bottom.
Edit: Fixed. I'll push most recent version soon.
Edit2: fixed.
I look forward to your valuable response on how I can improve. I just learned CSS variables today and my next update will feature CSS variables rather than sass variables.
Community feedback
P
Matt Studdert• 13,611
@mattstuddert
Posted
Awesome work on this challenge, Simeon! It's great to see that you managed to resolve the whitespace issue by yourself. Your code looks really good, I've just got a couple of recommendations:
- You've currently got
labelelements that are paired withinputelements, which is great. But the labels haven't got any text inside, which makes the inputs inaccessible to screen reader users, as they wouldn't know what they were supposed to enter in the form field. Always make sure that you either have labels with text inside or anaria-labelattribute on theinputelements to help people using screen readers fill in the form with the correct data. - You're currently using the default HTML5 form validation messages. I'd recommend having a go at making the custom error messages that are in the design. It's a nice extra challenge.
Keep up the great work! 🙂
0
Simeon Udoh• 535
@simeon4real
Posted
@mattstuddert Thanks! I finally fixed it!
0
P
Matt Studdert• 13,611
@mattstuddert
Posted
@simeon4real nice work! Sorry I missed your original message. I didn't get notified because it wasn't a direct reply. Also, I've been seeing your feedback to others on here. Thanks a lot! You're giving great advice 🙂
0
Please log in to post a comment
Log in with GitHub
Join 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