Skip to content
Submitted almost 3 years ago

Flex-box, Grid

POTB•330
@Peteonthebeat
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What did you find difficult while building the project? — I am in the process of figuring out 'Flex' and 'Grid.' So I'll refer to them as the most difficult. I

Which areas of your code are you unsure of? — I am quite satisfied with the results I get from using 'em' and 'rem' instead of pixels. On the contrary, I'm not 100% sure I use those values most optimally...

Do you have any questions about best practices? — Yes, I actually have one. What should I do if the following doesn't center a div inside my main?

main { display: flex; justify-content: center; align-items: center; }

Regards!

Code

Please log in to post a comment

Log in

Community feedback

  • Snehamoy Bag•600
    @snehamoybag

    Hi @Peteonthebeat

    Looks like your site is not loaded as the index.html is inside of a folder/directory. I'd recommended you to put the files outside of the Qr~Code-Component folder and then update the solution 👍

    And also answering to your query, justify-content: center and align-items: center should center a div both horizontally and vertically when the parent container has a set height. If the parent container doesn't have a height, align-items property won't work when flex-direction is set to row. Similarly, justify-content won't work when the parent container doesn't have a height and its flex-direction is set to column. 😄👍

    Marked as helpful
  • POTB•330
    @Peteonthebeat

    @Snehamoy Bag, Thanks!

    I'll definitely consider your advice and maybe resubmit this solution with the folders properly organized...

    Sincere, Pete

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