Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Frontend Mentor Challenge #1

kwabsvlado 210

@kwabsvlado

Desktop design screenshot for the QR code component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@aratur

Posted

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
Discord logo

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