Responsive Qr Code Card Design with CSS Flex

Solution retrospective
I'm glad that I was able to complete this. I have learned that prior to getting into the coding there are many other challenges and sometimes command line things you need to learn. Finally, getting to practice has been great!
Next time, I would like to make the responsiveness more fluid.
What challenges did you encounter, and how did you overcome them?Some of the challengers I encountered were getting the white background container centered. I was able to do it at some point but after editing the elements inside, it locked back to the left of the screen.
I later solved this with margin: auto; but I don't fully understand why it went back to the left hand side of the page.
What specific areas of your project would you like help with?When I zoom in or out of the page the size of the text changes, but the image size does not change. I'm not sure if this is the correct approach to this. I think it breaks page.
I would like to learn how to handle that situation.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @adam-crowley
To allow the design to scale when you zoom, make sure the width, padding and font-size properties are using REM units on all elements on the page (eg
.qr-container { width: 25rem }
).I would also add ARIA landmarks to the HMTL to help with accessibility (eg
<main role="main">
around the .qr-container div and<footer role="contentinfo">
around the .disclaimer div).Marked as helpful
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