Used bootstrap as well as custom css to create layout to match design.

Solution retrospective
I'm most proud of the way of aligning the modal vertically. Next time I would look at other ways of overcoming this challenge by use of other methods.
What challenges did you encounter, and how did you overcome them?The main challenge I encountered was vertically centering the div modal container the qr code and content. I overcame this by using position absolute, relative to the direct parent container. then aligning with top, left and transform.
What specific areas of your project would you like help with?Better methods of vertically centering divs and other sections.
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@edjohnsondev
Nice work! And good one for using transform to bring it back by 50% of what you moved!
Couple links to help you with some other methods to do this as with something like this it's a valid solution to use. But as
position: absolute;
removes the element from the normal flow it'll cause more work with responsiveness as it's essentially no loner in the container you have. It's great if you want to layer things on top of another, like a blog post with a tag for the category and so on.Theres a couple other methods i'd suggest.
display: flex;
This allows you to position the element or elements anywhere inside the container. If you've had a look at Bootstrap it's what that uses.To centre something inside the container both vertically and horizontally you'd do this
.container { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ }
Take a look at: Flexbox Froggy. This is a handy tool to pick it up!
You've also then got
display: grid;
Which turns your container into a two dimensional grid. Settings how many rows/columns as you want and then placing each child element in that cell.
If all you need is to centre one thing (or line up a simple row/column), flexbox is quicker and easier.
When your layout is more complex / multiple rows and columns that need to rearrange themselves at different screen sizes. Grid makes it easy to change where things sit when the design “stacks” or shifts on smaller screens.
Check this out: CSS Grid.
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