Submitted over 1 year ago

Responsive QR Code component with CSS Flexbox

Vishnu_31•230

@vishnu-31

Preview site View code

This is a solution for...QR code component

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

I found that centering the div vertically difficult

I centered the div vertically using table value on display property but, I know there are other ways to center a div vertically. I have tried align-items in flexbox and place-center in grid. it did not work.

so if you can suggest my best practices to do this. That will be more helpful.

Community feedback

Steve•1,170
@peanutbutterjllyPosted over 1 year ago
hey 👋,

in order to center things using Flexbox or grid, your container should be at least the height of the screen; to help troubleshoot, try putting a red border on your container before/after using Flexbox/Grid. the items can't be centered vertically if there isn't enough space in the container.

MDN: Aligning items in a flex container

MDN: Grid, Center an item in the area

CSS Tricks: complete grid guide

CSS Tricks: complete flex guide

hope this explanation and the links helped!
Marked as helpful
1
Vishnu_31•230
@vishnu-31Posted over 1 year ago
Thank you @peanutbutterjlly. the resources are really helpful.
1

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