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 Component

@AdamElitzur

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


Is there anything that I should be doing differently? Maybe with the units, is it bad to hardcode in 25 ems just because it looks right?

Community feedback

Naveen Gumaste 10,480

@NaveenGumaste

Posted

Hay ! Adam Good Job on challenge

These below mentioned tricks will help you remove any Accessibility Issues

-> Add Main tag after body <main class="container"></main>

-> Learn more on accessibility issues

If this comment helps you then pls mark it as helpful!

Have a good day and keep coding 👍!

Marked as helpful

1
P
Jessica 880

@perezjprz19

Posted

So your image is actually huge on my phone and I think that is because you hard coded the width and the height, so it's not adjusting to my screen size and it's overflowing.

Could you try playing around with max-width instead of width?

I also didn't add a height to mine. I let the content in the card decide the height.

Here is my solution in case you want to check it out.

Marked as helpful

1

@AdamElitzur

Posted

@perezjprz19 Oh, didn't realize that. I set the width of the card to 25 em and height to 37 em, is there a better unit I should use? Also, I took out the width and replaced it with a max-width, so I think it's better now. Let me know if you see any changes. Thanks so much! I think Github pages takes some time to show updates, so it might take a few minutes.

0
P
Jessica 880

@perezjprz19

Posted

@AdamEli

"Em" is fine in my opinion. It does fit much better in my screen. And when I check on my desktop it looks good, though it does appear to be a bit wider than the design. That's a relatively minor problem though.

Good job with your solution :-)

Marked as helpful

0

@AdamElitzur

Posted

@perezjprz19 Thanks! I changed it even more, I realized I was working in a zoomed-out mode so it looked smaller, now it should be better. Thanks so much for helping!

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