Submitted about 2 years ago

Responsive QR-Code component using flexbox.

Akash Singh• 60

@akash-singh95

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

Hi everyone. I am having trouble dealing with images, it's like I have no control over their dimension and thus they take container space according to their wish. 1)How do I make my QR code take 70% of screen height in mobile view without explicitly stating it? 2)Why are my flex: grow shrink and basis property not reflecting as I wish it to? 3)Any other feedbacks regarding improvement are most welcome.

Community feedback

Satyam Jha• 400

@satyammjha

Posted about 2 years ago

Great Design Akash. I have a few suggestions for you:-

Please increase the height of the container div.
Use the <br>tag after the word front-end of the h4.
Use the <br> tag after the word front-end and to of the paragraph so the text will appear as it is given in the design.
Increase the font size of <h4>. All other things are perfect. Hope it will help you.

Marked as helpful

Akash Singh• 60

@akash-singh95

Posted about 2 years ago

@satyammjha Thanks Satyam,One concern, is using <br>tag a good practice?

Satyam Jha• 400

@satyammjha

Posted about 2 years ago

@akash-singh95 I am not sure about this but there is another method for the same, you may use the <p> tag after the word front-end to move the words to the next line then further adjustments using CSS.

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