I just used html and Css
Solution retrospective
how can i put the box in the middle of the center?
Please log in to post a comment
Log in with GitHubCommunity feedback
- @AkoToSiJeromeEh
Hi there! Great work out there! I noticed that the QR Code component is not vertically aligned, and I recommend adding CSS properties to the body, such as d-flex and its related properties. Additionally, it's important to include min-height or height for proper alignment. By adding this to the body properties, you can achieve centering of the QR Code component. Furthermore, when we look at the design reference, the paragraph element is aligned at the center of the container. Therefore, I recommend adding text-align: center to section#caixa. I hope this suggestion helps and works for you. Happy coding!
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-family: Arial, Helvetica, sans-serif;
background-color: #D5E1EF;
font-size: 1.75em;
text-shadow: 2px 2px 5px lightgrey;
line-height: 40px;
}
Marked as helpful - @kensparby
You're off to a good start, Gabriel! Looks good, with semantic tags and all, and you got it very close to the example image.
One small tip, don't use the
vh(viewport height) unit for things like padding. It may look good on your screen, but if for instance someone used a vertical screen instead it might look very wonky to them, as if the padding is too big. You can see this for yourself by zooming the page out (Ctrl + Mouse scroll) which effectively simulates an increased viewport height.A better unit for this might instead be
rem, which is based off the font size of the root element, which on the web is the <html> element. This is easier to control for both developer and user, and ensures that things will look properly scaled relative to the text.Oh, and for your question. As Akiraz14 mentioned already this is easily done with flexbox, but you will also need to ensure that the <body> element is tall enough. By default it's only as tall as the elements within it, so centering inside it will seem to have no effect. Use e.g.
min-height: 100vh;to achieve this.Good luck! Ken
Marked as helpful - @Akiraz14
Hello Gabriel, I think your page seems great, is a very good approximation to the original model.
Answering your question about centering the box, you can do it with just 2 lines of code in the CSS code!
You just have to use 'flexbox', I recommend some reading and also to make your learning process more interesting the Froggy flexbox website which is a didactic game.
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
- https://flexboxfroggy.com/#es
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