Submitted over 1 year ago

QR-Code Challenge with flex

Sadoming•10

@Sulig

A solution to the QR code component challenge

Preview Code

Solution retrospective

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

He intentado ajustarme lo máximo posible al diseño.

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

Centrar todo en su sitio.

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


article {
    /* Box Shadow */
    box-shadow: 0px 25px 25px 0px rgba(0, 0, 0, 0.05);
}

Code

Please log in to post a comment

Community feedback

Grego•1,430
@Grego14
Posted over 1 year ago
Hello! 🎉 congratulations on completing the challenge! 🎉

To center the elements inside the body you already have everything you need using flex, it's just that the body does not have enough height, this will solve it:
```
body{
  min-height: 100vh;
}
```
and you could now remove that margin.

I do not recommend placing links in the alt attribute, something like this would be better:

"A qr-code, go to frontendmentor"

Don't skip the headings, you are using a h2 when you should first use a h1

In the box-shadow it is not necessary to specify all the values!

you can do something like this:
```
/* offset-x, offset-y, blur, spread, color */
box-shadow: 0 25px 25px rgb(0, 0 ,0, 0.05)
```
Some may be optional depending on what you want to do.

To avoid making this type of padding and make it more legible, you can do this:
```
/* padding: 16px 16px 40px 16px; */
  padding: 16px;
  padding-bottom: 40px;
```
I hope this helps! 😁
Marked as helpful

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