Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

QR-Code display page using SASS

@ChurchillV

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Pleased with how I was able to quickly learn SASS and use it for this project.

What challenges did you encounter, and how did you overcome them?

  • Struggled in centering the qr code components on the screen, read on article on centering divs to figure it out.

  • Creating a responsive layout for the component proved a bit challenging. Ultimately I only made a minor change to enable responsiveness. (Literally just changing the entire background colour to blue)

What specific areas of your project would you like help with?

  • Improving the responsiveness of the project. Currently the entire background just turns blue on smaller screens. I want to adjust the width of the background on smaller screens and change the padding, while keeping all the content on the view port.

Community feedback

@tufcoder

Posted

Very good layout, but I think you need to pay more attention in:

  • Get the repo public in github, I can't see the code outside Developer Tools in a Browser.
  • Use less divs and adds more semantic tags like main, header, paragraph.
  • Try to use the entire Viewport for a best responsive layout and test different screen sizes. For example, using a mobile version and put the phone horizontally, the top of your layout is hided.
  • For better adjustments for images, try use img { width: 100%; } in your css and see what happens.

That's my improvments to you, good work and happy coding!

0

Please log in to post a comment

Log in with GitHub
Discord logo

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