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

responsive qr code

Satty90 10

@Satty90

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 challenges did you encounter, and how did you overcome them?

Displaying the image in prod seems to be an issue when deploying on Vercel however I managed to fix the bug by changing directory

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi!

Congrats with your first challenge, that's cool =)

I can give a few tips.

  • You can style image directly, without wrapping it in the div. Also there is no need to set height for it as images adjusts their proportions.
  • Every page should contain main tag. You can use it instead div wrapper.
  • I recommend you to use min-height instead height for body tag. That way it could stretch in cases if content would be bigger than screen size.
  • It is good idea to make the width of the container responsive too. You can do it with max-width property.
  • For font sizes it's better to use rem instead of pixels. It's a special values which depends on users font settings.

So, hope that could helps =) Good luck, keep doing cool stuff =)

0

Satty90 10

@Satty90

Posted

@Alex-Archer-I Thank you so much Alex I will implement the tips in the next challenge

1
Alex 3,130

@Alex-Archer-I

Posted

@Satty90

You're welcome =) Fell free to ask anything if need =)

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