Submitted over 2 years ago

QR Code Box: Rookie CSS, Questions Inside

11arshaan• 20

@11arshaan

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

Hello! This challenge is the closing to my intro to HTML/CSS. I'm preparing to dive deeper, so I have a few questions about the simple stuff that might be overlooked otherwise:

I used element width to "squeeze" the text elements to match the provided design. Is there a better method to match wrapping or is element width the way to do it?
I used absolute positioning to roughly estimate the center position of my screen. What is the recommended method to center non-text elements? I have yet to learn responsive design, so maybe that's where the answers to this question are.

Community feedback

Rio Cantre• 9,690

@RioCantre

Posted over 2 years ago

Hello there! Nice work with this one. Looking at your solution, I would suggest the following for you...

Wrap the content of qrbox with specific tag like main. For HTML structures, refer it with this one Semantics
Remove left: 42vw;, top: 20vh; and position: absolute; in .qrbox . Add margin: 7rem auto; and padding: 0.1rem;
Aside from using width for the fonts, add padding instead. For instance, padding: 0 2rem; in .qrp1 and padding: 0 3rem 3rem 2rem; in .qrp2 rule set

Above all, the design is great. Hope this helps and Keep it up!

Marked as helpful

Account Deleted

Hi there 👋

Congratulate on finishing your project 🎉. You did a great job 🔨

I give some suggestions that I hope help you take your project design to the next level 📈.

These are tiny details but I hope it helps a lot. The image with class qrcode should have less border-radius like 9px 👍
To make the box-shadow look line the original let's change it also to box-shadow: 0 12px 24px 0 rgb(0 0 0 / 10%); ✅💡

Happy coding ☕

Maqsud

Marked as helpful

Naveen Gumaste• 10,460

@NaveenGumaste

Posted over 2 years ago

Hay ! arshaan 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

Please log in to post a comment

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