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 Component

@Ogochukwu-ugo

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


Please provide feedback on the best way to use the font size specified in the style guide. I tried using the recommended font size for that particular paragraph, which was 15 px, but I had to reduce it because it was too large.

Community feedback

Favour 2,160

@Nadine-Green

Posted

HI OGOCHUKWU!

To get rid of the accessibility issues, instead of using multiple divs, you could try using semantic elements instead like article section etc, like for example for the .attribution class, instead of using a div, you could use a <footer> instead. You can learn more here.

IF YOU FOUND THIS IN ANWAY USEFUL, DON'T HESITATE TO MARK IT AS USEFUL :)

HAPPY CODING!

Marked as helpful

0

@VCarames

Posted

@Nadine-Green

Thank you for contributing to the FEM community! I have notice that you are asking members to mark your comment as helpful. This unfortunately against FEM policies;

"Please don't…Ask people to mark your comment as helpful — A big part of Frontend Mentor is helping each other out and providing feedback. If you give some feedback, please avoid saying things like, "if you found this feedback useful, please mark this comment as helpful". It places unnecessary pressure on the solution author to mark your comment as helpful, which is best avoided. Feel free to say something like, "I hope you find this helpful", but please avoid asking for your comment to be marked as helpful outright."

0
Favour 2,160

@Nadine-Green

Posted

@vcarames

@vcarames Offering feedback on solutions can greatly help the solution author. However, please avoid repeatedly copy/pasting the same canned feedback on numerous solutions. Offering a single improvement like "add a main tag" or "add a h1 heading" and spamming the same advice on multiple solutions is not helpful. It also skews the points system because invariably, some of these comments will be marked as helpful, awarding the commenter points.

This is a common tactic to "farm points", resulting in high positions on the Wall of Fame. If you are seen doing this, you risk having your account flagged (see Enforcement section below) and losing your points.

0

@VCarames

Posted

@Nadine-Green

Glad you brought this up, a while back on slack it was determined that it was ok by the moderators. As long as the recommendations are accurate, detailed and present on the users code.

Also if you read closely, you’ll notice that it states "Offering a single improvement like "add a main tag" or "add a h1 heading". My recommendation are multiple, offer full details, and provide links.

1
Favour 2,160

@Nadine-Green

Posted

@vcarames

So my recommendations are not "accurate, detailed, and present on the users code"

Listen, what you're doing is what I'm doing, helping people. Everyone on this website are full grown adults, they're not kids who are easily manipulated so stop treating them like one, if the advice I give to people is not helpful, regardless of whether I ask them they won't mark it as helpful, but it must be helpful because they do.

Please, let's just stop this argument, it's childish, otherwise, this will just be a case of the kettle calling the pot black, I haven't offended you in any way, so let's just stop

0

@VCarames

Posted

@Nadine-Green

I never mentioned that your recommendations weren’t helpful. The fact is, they are. What am saying is that you are violating FEM policy by telling users to mark your comment as helpful.

My goal was to make you aware of that, nothing more and nothing less.

Again, thank you for helping and contributing to the FEM community.

Happy Coding!🎄🎁

0
Favour 2,160

@Nadine-Green

Posted

@vcarames

As I said, let this not be a case of the pot calling the kettle black.

But thank you for letting me know about my violation :)

0

@Ogochukwu-ugo

Posted

@Nadine-Green I appreciate you checking out my solution to this challenge and pointing out where I could improve. Thanks

0
Favour 2,160

@Nadine-Green

Posted

@Ogochukwu-ugo

I'm happy that i could help :)

0
tan 640

@tan911

Posted

Hello, @Ogochukwu-ugo,

  • Try using rem for font-size, use this tool https://nekocalc.com/px-to-rem-converter to convert you px to rem.
  • To remove accessibility report try wrap your content with main element or you can put a role attribute with the value of main in your div element.

Hope this will help, Thanks.

Marked as helpful

0

@Ogochukwu-ugo

Posted

@tan911 Your feedback actually made me learn something new. I never knew there was a "px-to-rem-converter." Thank you very much,

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