Skip to content
Submitted over 2 years ago

Responsive QR-Code component using flexbox.

Akash Singh•60
@akash-singh95
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

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
    @satyammjhaPosted over 2 years ago

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

    1. Please increase the height of the container div.
    2. Use the <br>tag after the word front-end of the h4.
    3. 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.
    4. Increase the font size of <h4>. All other things are perfect. Hope it will help you.
    Marked as helpful
    0
    Akash Singh•60
    @akash-singh95Posted over 2 years ago

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

    0
    Satyam Jha•400
    @satyammjhaPosted over 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.

    0

Please log in to post a comment

Log in with GitHub

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