Skip to content
Submitted over 1 year ago

Frontend Mentor Challenge #1

kwabsvlado•210
@kwabsvlado
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

Hello this is my first Frontend Mentor challenge, i had trouble with overflow of text out of the div. I would appreciate some tips how to fix that. The only solution I found out was min-height : 0 but I'm not sure if that is the right way and whether it completely fixed it. . I would appreciate every feedback.

Community feedback

  • Andy•190
    @araturPosted over 1 year ago

    Regarding your question about overflow, this is happening because you restricted the size (both height and width) of the container that you're using, and text is trying to squeeze until there is no more space available and it overflows. Remove this constraint on either width or height, and allow the div to grow with the content. Next focus on the size of the content so that it allows you to match the preview. U can read a more detailed explanation at developer.mozilla.org - sizing items

    But as I see it, once you do the above, you're container will no longer align in the center, this is because of how you're centering the div instead of top: 0, left: 0, right: 0, bottom: 0, and height: 60vh, maybe try one of these cool methods w3schools - css align.

    Good luck!

    Marked as helpful
    1

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