Responsive ratings component using HTML/CSS media queries + JavaScript
Design comparison
Solution retrospective
For some reason, the CSS that I applied for the submit button did not appear on mobile. The padding
property did not change anything, but I was able to change the background color. I found the form handling to be a challenge as I did not know whether to include a form action
or what that action would have been. I am also unsure of my use of relative
and absolute
positioning to center the card on the page. Thank you for looking!
Community feedback
- @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- The “icons/illustrations” in this component serve no other purpose than to be decorative; Their
alt tag
should be left blank and have anaria-hidden=“true”
to hide them from assistive technology.
More Info:📚
https://www.w3.org/WAI/tutorials/images/
- Your
form
is lacking a visually hiddenlegend
for accessibility and afieldset
to prevent users from selecting more than one rating.
More Info:📚
MDN <fieldset>: The Field Set element
- Do not forget to update your code with the errors the FEM report found.
- A lot of the headaches and repeated properties can be be overcome by implementing a proper CSS Reset.
Here are few CSS Resets that you can look at and use to create your own or just copy and paste one that is already prebuilt.
https://www.joshwcomeau.com/css/custom-css-reset/
https://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
Marked as helpful1 - The “icons/illustrations” in this component serve no other purpose than to be decorative; Their
- @dylan-dot-cPosted almost 2 years ago
Here are 2 easy ways to center anything without using relative/absolute
-
CSS Flex .container { display: flex; align-items: center;/vertivally/ justify-content: center;/horizontally/ }
-
CSS GRID
.container { display: grid; place-items: center; }
I saw that you used flexbox already so this should be clear to you. XD
Marked as helpful1@elizabethrsotomayorPosted almost 2 years ago@dylan-dot-c Thanks, I should have been more clear with my question. I already know that stuff about grid/flexbox but didn’t know if relative/absolute positioning to center my card would be considered a bad practice or not. I guess your response answered that question too! Thanks again.
1@VCaramesPosted almost 2 years ago@elizabethrsotomayor
It’s an outdated method, and for the purpose you’re using it for. It is still useful for other things, like positioning a
nav
hamburger button, placing an illustration in a certain unique manner, etc…Marked as helpful1 -
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