Design comparison
Solution retrospective
Hello Team, I enjoyed building this project but encountered a problem making this design mobile responsive. To this point, my project is not mobile-responsive. I kindly invite help and advice. Media queries are my biggest hill to climb :( !
Community feedback
- @vanzasetiaPosted about 2 years ago
Hi! 👋
Congratulations on completing your first Frontend Mentor challenge! 🎉
There's no need for media queries to make the site responsive. You only need to put a
max-width
on the card to prevent it from filling the entire page.No
max-width
on thebody
element. Thebody
element should always fill the entire page. Treat it as the main element of the web page.The alternative text of the QR code should be hyphenated like the class name. It should be human-readable.
Lastly, use single class selectors for styling whenever possible instead of
id
.id
has high specificity which can lead to many issues on the larger project. It's best to keep the CSS specificity as low and flat as possible.Hope this helps!
P.S. I recommend reading the "Responsive design ground rules" blog post. This is a good guide to follow to build a responsive website.
Marked as helpful1@JamesSimelPosted about 2 years ago@vanzasetia thank you very much. I really appreciate your feedback.
1 - @denieldenPosted about 2 years ago
Hello Simel, You have done a good work! 😁
Some little tips to improve your code:
- remove
max-width
from body - add
main
tag and wrap the card for improve the Accessibility - you can use
article
tag instead of a simplediv
to the container card for improve the Accessibility - remove all
margin-top
fromcontainer
class because with flex they are superfluous - after, add
min-height: 100vh
to body because Flexbox aligns child items to the size of the parent container - instead of using
px or %
use relative units of measurement likerem
-> read here
Keep learning how to code with your amazing solutions to challenges.
Hope this help 😉 and Happy coding!
Marked as helpful1@JamesSimelPosted about 2 years ago@denielden thank you very much. I appreciate that reference on units of measurement and your feedback, it means love. I will keep doing challenges and learn from this great community.
1 - remove
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