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
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


i would love some feed back thank you

Community feedback

@Nwose

Posted

Your card component is too big, i feel you should reduce it a little and adjust your font size to look like the design more. Good job by the way.

Marked as helpful

2

@GsaxVibe

Posted

@Nwose thank you... Is there a way to know the actual size to use?

0

@Nwose

Posted

@GsaxVibe you can use your chrome dev tools to keep adjusting the size of the container, until you get the exact size. But if you don't know how to use chrome dev tools or you are using another browser, you can hit me up for help.

0
Vanza Setia 27,795

@vanzasetia

Posted

@GsaxVibe

You need a design file to know the exact size of the card. But, it is possible for you to measure the size of the card and get it as close as possible to the design. 🙂

For your information, the card only needs a max-width to be responsive. By setting a max-width the card is allowed to grow with the amount that you specify but it will allow the card to shrink if ever needed.

0
Vanza Setia 27,795

@vanzasetia

Posted

Hi, Godfrey Ikhuemein! 👋

Congratulations on completing your first Frontend Mentor challenge! 🎉

I agree with @Nwose, the card is too large. So, I would recommend trying to adjust the styling to make your solution looks closer to the original design. 🙂

One more suggestion I have is to give some alternative text to the QR code. img with an empty alternative text will be ignored by screenreaders. It is not good since the QR code is the main content of the site. So, give some good alternative text to it.

Hope this helps! Happy coding! 👍

Marked as helpful

1

@GsaxVibe

Posted

@vanzasetia Yea it does. Would put that into use Thanks again

1

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