Design comparison
Solution retrospective
How do I make such a small component fully responsive? The entire div has a fixed width that is centered. It does not grow or shrink with browser window.
Community feedback
- @DavidMorgadePosted over 2 years ago
Hello and congrats on finishing the challenge.
In this case your component is fully responsive it fits the sizes of the challenge, so you dont have to worry about that.
In this case your component is not growing because you used a
max-width: 420px
on the#main-card
id, in the case you are building this component as a part of a full page, you can use normal width with % or just adjust them with media querys.Let me know if this solves your question
Marked as helpful1 - @jucajulian0907Posted over 2 years ago
Hello! @dagimchi,
with max-width: 420px; and width: 100% you will be able to make the container adapt to any size but it will completely break the design. In the last media query you could decrease the width and increase the height of the container to make it look nice. I hope my comment helps you!
Marked as helpful0 - @VCaramesPosted almost 2 years ago
Hey there! 👋 Here are some suggestions to help improve your code:
- It is best practice to use,
classes
for styling purposes, while usingids
solely for JavaScript.
- The “icons/illustrations” in this component are only 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/
- To ensure that the "rating buttons" are fully accessible, they need to be built using a
form
and inside of it, there should be fiveinput radios
and eachinput
should have alabel
attached to it to make the buttons accessible. Finally wrap all theinputs
andlabels
inside afieldset
to prevent users from making more than one selection.
More Info: 📚
- For improved accessibility 📈 for your content, it is best practice to use
em
formedia-queries
. Using these unit gives users the ability to scale elements up and down, relative to a set value.
If you have any questions or need further clarification, feel free to reach out to me.
Happy Coding!🎄🎁
0 - It is best practice to use,
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