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

@tbensheimer

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


Hello everyone! This is my first official Front End Mentor project completed. It wasn't difficult but I did have a little problem finding the "perfect" size for my container.

If anyone has any tips on helping me find the best size for my project containers for the future Front End Projects. I am also welcoming any feedback on how I can improve. Thank you in advance!

Community feedback

Account Deleted

Hi Trenton 👋 Congrats on finishing your first challenge!

Your design looks very similar, just a few little things:

The width of the container element is 325px actually and you need to increase the padding inside of it - to 15px I would say.

Also, the heading and paragraph should be closer together, and consider replacing the h2 element with h1 because of the accessibility issues.

I hope that helps.

Other than that, looks great. Keep up the good work! 👨‍💻💪

Marked as helpful

0

@tbensheimer

Posted

@kom42ec Thank you for your help and for your response! May I ask, how did you know the width of the container is 325px? There is no details that mentions the width of the container, just the mobile and desktop widths.

Thank you again!

0

Account Deleted

@tbensheimer I didn't know.

I just looked at the mobile design which is 375px wide and saw a padding on both sides that is approximately 25px each. So I substracted those 2 x 25px from 375px and I got 325px.

But I might be wrong, now I see people use 320px as a width, maybe they got the Figma files and it's provided there.

When you don't have the details all you can do is use your best judgment. So that's what I did :)

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