Submitted about 1 year ago

QR Code Component Using CSS Flexbox

MonarchRyuzaki• 180

@MonarchRyuzaki

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

I usually find it a bit difficult on the following things:

Center/Position stuff.
Setting Height/Width and stuffs of images

So would want some advice to improve on that Thank you

Community feedback

Michelle Dela Rosa• 180

@mbdelarosa

Posted about 1 year ago

Hello and good job on finishing the challenge!

I don't think there's any need to set an explicit height and width on the image -- giving it a max-width: 100% should work so that it takes the width from the parent div card and then use padding to add space between the card's edges and its content. By doing so, the image would adjust accordingly when the screen is resized to a smaller resolution (ex. 320px width for mobile view)

Setting the img to have max-width: 100% is usually recommended and I believe is also a standard in most modern CSS resets -- a good practice to include one at the start of the styles. I recommend these if you'd like to give them a read:

https://www.joshwcomeau.com/css/custom-css-reset/
https://andy-bell.co.uk/a-modern-css-reset/

Hope these help!

Marked as helpful

Øystein Håberg• 9,450

@Islandstone89

Posted about 1 year ago

Hi there. Some good suggestions already, here are my thoughts.

Your .cont div should be a <main>. Main elements are landmarks that identify the primary content of the page. It has more meaning than just a div and is important in terms of screen readers, etc.

The heading should be wrapped in a <h1>, the paragraph in a <p>. In such a simple page you don't need the wrapping divs, the same goes for the image.

Inheritance is an important concept in CSS. It means that if you set a value on a parent, the children will inherit that value. All the text on this card should have center-aligned text. Hence, you can put text-align: center on the <body>, instead of having to add it to the heading, paragraph, and footer.

The same is true for the font-family; put it on the <body>, as the default font for the content on the page.

Finally, I would use the <gap> property to control the vertical spacing between the elements. I find that easier than having margin/padding on the elements itself.

Hope this helps. All the best :)

Marked as helpful

AssadullahADELYAR• 200

@AssadullahADELYAR

Posted about 1 year ago

Hi! use flex-box to center your content.

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