Solution retrospective
I overcame some frustration with positioning and finished the project.
What challenges did you encounter, and how did you overcome them?I struggled with getting everything centered responsively. I overcame it by googling and looking at other people's solutions and trying things until I got it to work for me.
What specific areas of your project would you like help with?Any tips on centering divs both vertically and horizontally.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @ViniciusLCLima
With your div with a class of qr-card being the child of the body element, you could turn the body into a flex box, justify-content: center, align-items: center and then set the height of that same body element to 100vh, vh is a unit that divides the view height by 100, so you'll have a body element with the same height as view height of the page in your browser, also remove the default margins by adding margin:0px to body. As the body element will be as big as the view height and have no margin and qr-card div will be positioned in the center and in the middle of it, the card will be centralized in the middle of the screen. To summarize: body {display: flex; justify-content: center; align-items:center; height: 100vh; margin:0px)
Another thing you could do is to substitute the first "div" tag to a "main" tag. This will make it easier for people with disabilities to understand your page.
Marked as helpful - @digigrrl525
Good job. It looks like you figured out how to center divs. One trick I learned is that to use (margin=0, auto) the width has to be set first to work properly.
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