Submitted almost 2 years ago

Flexbox and HTML5

dralveol• 160

@dralveol

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 do you think about the HTML was it appropriately semantic ? Is the use of px for width of the card acceptable ?

Community feedback

Hassia Issah• 50,670

@Hassiai

Posted almost 2 years ago

There is no need to give the body flex-direction: column; Give .qr-code-img a max-width of 100% instead of width:100%. Give .card a padding value for all the sides.

Use rem or em as unit for the padding, margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To

Hope am helpful. HAPPY CODING

Marked as helpful

dralveol• 160

@dralveol

Posted almost 2 years ago

@Hassiai Used your corrections worked just as fine. Thanks for the insights.

Sinisa Vukmirovic• 1,690

@SinisaVukmirovic

Posted almost 2 years ago

Hello!

Very nice, used semantic elements and even pushed the footer to the bottom. Great!

Use of px for the width is acceptable.

Unrelated to this challenge, in general, you should avoid setting fixed value width on elements as less as possible, and always let the content inside of it dictate the width of things.

Marked as helpful

dralveol• 160

@dralveol

Posted almost 2 years ago

@SinisaVukmirovic Thanks a lot for the feedback

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