Submitted about 2 months ago

QR Code Component using HTML5 and CSS Flexbox

Sunay Dagar• 70

@suzzy-dszy

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

QR code component

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Being able to nest flexboxes and center aligning content.

What challenges did you encounter, and how did you overcome them?

Implementing external fonts, but a quick read on the google fonts webpage quickly solved that issue.

What specific areas of your project would you like help with?

When styling my main element;

main {
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: #ffffff;
        width: 25rem;
        border-radius: 15px;
        padding-top: 20px;
        margin: 10px;
      }

Initially I had included a height property set to 80vh to try and achieve the required look and mainly to fit the content inside because I thought the contents would overflow and not fit in the element by default, however upon shrinking and expanding my website it didn't quite preserve the layout I wanted. On a whim, I deleted the height property and suddenly my content fit properly in contrast to what I originally thought and was also properly responsive as to my needs. I would like some insight on to why I did not need to set a height property and how my content seemed to fit perfectly automatically . I am new to flexbox so maybe it's just some oversight, but any help would be greatly appreciated :)

Community feedback

haquanq ®️• 1,585

@haquanq

Posted about 2 months ago

Hello @suzzy-dszy,

Are you using browser Devtool for development?

To answer your feedback question above:

body or main (other than textual elements or a few other elements like input, img, ..) is block level element (has default of display: block) which has it's width always expanded to fit the parent element and it's height to fit it's content size by default.
Using display: flex on parent element make it's child element's width to shrink to it's content size. In your case, you are using display: flex on body which make main element size shrunken to it's content (consists of element sizes, paddings, margins).

<body>
   <main>
   <main>
</body>

body {
    display: flex; /* this override main element default width - not expand anymore*/
}

Have a nice day!

Marked as helpful

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