Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 9 months ago

QR Code Responsive Website

dibzthedibz•30
@dibzthedibz
A solution to the QR code component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

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.

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community 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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License