Responsive QR Code Component with Custom CSS Styling and Background.

Solution retrospective
I’m proud of how I was able to implement a responsive design using CSS Grid and Flexbox, which ensured the layout looks great on both mobile and desktop screens. Next time, I would focus more on accessibility by adding aria attributes to improve keyboard navigation and screen reader support.
What challenges did you encounter, and how did you overcome them?The main challenge was ensuring the design adapted correctly across different screen sizes. I overcame this by fine-tuning the media queries and utilizing Flexbox for more flexible and dynamic positioning of elements.
What specific areas of your project would you like help with?I would appreciate feedback on the responsiveness of the components on mobile devices, especially suggestions on improving media queries or other methods for better optimization for various screens. Additionally, any advice on making the gradient stripe background more efficient or improved would be very helpful.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @juliabush
Avoid using pixels for font size. Instead use rem. You can find pixel to rem converters online, for reference 16px is 1 rem. This is best practice for responsiveness as some users may set there browsers to display larger font size, to help them with readability. That is why rem is so important, as it can adjust to these preferences, whereas pixels are fixed. Hope this tip helps :)
Marked as helpful - @MaximYarosh
Does the solution include semantic HTML?
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