QR Code Responsive Website

Solution retrospective
It took me all day to make my page responsive to different screen sizes while ensuring child elements stayed within their parent without overflowing. I think I did a great job organizing and making everything responsive. I used references and Copilot minimally—mostly to experiment with display and position options early on, but all the code is my own. I didn’t copy anything; I crafted it myself. Overall, I’m proud of this. It’s very responsive on desktop.
What challenges did you encounter, and how did you overcome them?Creating responsive HTML that meets modern standards was challenging. I've built some very outdated-looking sites in the past—think Geocities-level designs—but nothing close to what's required today.
Applying flexible units without hardcoding width and height was especially difficult, and while I’m still figuring it out, I understand it’s a learning process.
What specific areas of your project would you like help with?I need help making my page responsive. It’s not adapting well to mobile screens. The element should shrink proportionally, maintaining its position, surrounding white space, and spacing from the footer. The footer should stay at the bottom without overlapping the QR code. While it works on desktop, mobile functionality has been tricky, so I temporarily removed the footer.
Im still very new with writing responsive pages, and using css units outside of the "hardcoded" ones like px or vw vh. Trying to branch out to use more like rem and em, and those two are as far as ive gotten into the "Responsive" units.
Any help is greatly appreciated.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on dibzthedibz's solution.
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