Submitted about 2 months ago

QR-CODE-COMPONENT HTML/CSS

SKszymek•170

@SKszymek

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

The coding is of course not hard but this is my first time working with figma design files so It's some new experience.

What challenges did you encounter, and how did you overcome them?

Design files in figma. I need to practice working with that stuff.

What specific areas of your project would you like help with?

Can somebody tell me how to center the component in this case like in the example. Is there any information in figma design file which value of margin I should use?

Community feedback

Alaa Mekibes•1,540

@alaa-mekibesPosted about 2 months ago

Well done 🎉

To center your design, use Flexbox or Grid:

body {
display: grid;
place-items: center;
min-height: 100vh;
}

body {
display: flex; 
justify-content : center; 
align-items : center; 
min-height: 100vh;
}

min-height: 100vh;: to get full screen.

I recommend focusing on learning either the grid or flexbox method. Mastering one of them will make you feel much more confident and comfortable moving forward.

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